你不知道的前端性能优化 - 缓存优化 （三）
你不知道的前端性能优化 - 缓存优化 （三）
前言：所有的优化点都有其适用的条件，所有的优化点都能够量化看到效果，具体项目具体分析，并不是每个项目都能适用这里的每个点，望周知。
存储对象
我们常见的前端存储有这些：localstorage、cookie、sessionstorage、indexdb。这里就不一一的阐述每个存储的不同了。
那我们有这些存储对象我们就可以好好的利用这些存储对象。针对每个存储的各自的特点，可以做一些非常好的优化。
-
使用
localstorage缓存常用的数据 现代化浏览器都支持localStorage，我们可以实现一个类似这样的功能，当我们取一个数据的时候，先去localStorage中寻找，没有再向服务器发送请求。夸张一点，我们可以把图片、js文件存储到里面。看一个例子： [图片上传失败...(image-1cd30b-1552222954830)]淘宝真是物尽所用，所有储存对象基本都用了。在
localStorage存储了大量的数据，包含图片、icon等等。当页面第二次加载的时候就不用去重复请求后台相应的资源了。(localStorage存储大约能存 4M ) -
CDN域名不携带
cookiecookie存储能带给后端，所以主要是用来鉴别客户端的唯一性，知道你是哪个用户。所以cookie中的数据不能无意义，不能太大。 我们的CDN域名最好和主域名分开，这样在请求静态资源的时候就不会带上这个cookie了减少了请求头的大小，减少了客户所需的流量。可能感觉微乎其微，但是你假设你的cookie是 1k， 一天有 1万人访问，访问静态资源请求 2万 此，那么你就会白白消耗 1万K 的流量。 -
其余的存储对象都可以在适当的场景，适当的使用。使用的时候要考虑兼容，和最大储存容量。用的好是跑车，用不好是拖拉机。
PWA和 service worker
以下来自百度。
PWA是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。
PWA不能包含原生OS相关代码。PWA仍然是网站，只是在缓存、通知、后台功能等方面表现更好。
简单的来说 PWA 的概念提出，就是要 web app 更像手机里装的 APP 一样。具有推送，主屏图标和离线访问等特性。
PWA的提出可以说是一个进步，你可以想想以后的web app将会和手机app一样具有很多一致的功能，这种趋势下去，web app会大量诞生。
这里只是提出这一个点，具体的适应场景特别多，其中service worker对浏览器的版本要求高，小伙伴们可以在自己的web app中尝试实现PWA中的概念，没有特别高的兼容性要求可以试试使用 service worker 真心不错的，最后再推荐一个检测当前网站对 PWA 的支持度的谷歌插件 Lighthouse ，目前支持最高的应该是推特。
真正的缓存
以上的内容更多是浏览器的存储对象和PWA，真正不通过代码的浏览器缓存，是通过http header中的cache-control来完成的，浏览器接受到这个配置就会做相应的事情。
先了解下304状态码：
304
cache-control的属性(http 1.1)
-
max-age 指定缓存的最大有效时间，时间之内再次请求资源，不去发送
http请求 -
s-maxage 指定public的缓存的最大有效时间，优先级高于
max-age,会发送请求，返回状态：304 -
private 用户所独有的缓存，就是单一用户浏览器的缓存。
-
public 公共缓存，例如
cdn的，代理服务器的缓存。 -
no-cache 指定缓存是否要发送
http请求来询问服务器当前的缓存内容是否还有效，搭配max-age=0使用，有这个属性就会发送http请求询问服务器。 -
no-store 完全不会存储
配合的属性还有：
expires缓存的过期时间(http1.0的东西，没有上面的cache-control优先级高)
- 协商缓存策略一：
last-modified(response header) ：最后修改时间，标识文件的最后修改时间
if-modified-since(request header)：请求中带上浏览器中标识的最后修改时间，服务端会和文件真实的修改时间进行匹配，匹配返回304，不匹配重新返回文件内容
- 协防缓存策略二：
etag(response header)：文件的hash值
if-none-match(request header)：请求中带上浏览器中储存的文件hash值，服务端会和文件真实的hash值进行对比，成功返回304，不同重新返回文件内容
以上两个协商缓存都需要和cache-control一起使用
流程如下：
缓存流程
图片来源：https://www.cnblogs.com/mq0036/p/7090635.html
总结以上几点：
-
我们可以使用浏览器储存对象
localstorage、cookie、sessionstorage、indexdb等，存储相关的内容 -
在
web app的使用尝试使用service worker，实现pwa的一些理念。 -
对于图片等静态资源，在我们的服务器上使用协商缓存策略。
其它篇幅传送门：
