你不知道的前端性能优化 - 缓存优化 （三）

你不知道的前端性能优化 - 缓存优化 （三）

前言：所有的优化点都有其适用的条件，所有的优化点都能够量化看到效果，具体项目具体分析，并不是每个项目都能适用这里的每个点，望周知。

存储对象

我们常见的前端存储有这些：localstorage、cookie、sessionstorage、indexdb。这里就不一一的阐述每个存储的不同了。

那我们有这些存储对象我们就可以好好的利用这些存储对象。针对每个存储的各自的特点，可以做一些非常好的优化。

1. 使用 localstorage 缓存常用的数据 现代化浏览器都支持 localStorage ，我们可以实现一个类似这样的功能，当我们取一个数据的时候，先去localStorage 中寻找，没有再向服务器发送请求。夸张一点，我们可以把图片、js文件存储到里面。看一个例子： [图片上传失败...(image-1cd30b-1552222954830)]

   淘宝真是物尽所用，所有储存对象基本都用了。在 localStorage 存储了大量的数据，包含图片、icon等等。当页面第二次加载的时候就不用去重复请求后台相应的资源了。(localStorage存储大约能存 4M )

2. CDN域名不携带cookie cookie存储能带给后端，所以主要是用来鉴别客户端的唯一性，知道你是哪个用户。所以 cookie 中的数据不能无意义，不能太大。 我们的CDN域名最好和主域名分开，这样在请求静态资源的时候就不会带上这个 cookie 了减少了请求头的大小，减少了客户所需的流量。可能感觉微乎其微，但是你假设你的 cookie 是 1k， 一天有 1万人访问，访问静态资源请求 2万 此，那么你就会白白消耗 1万K 的流量。

3. 其余的存储对象都可以在适当的场景，适当的使用。使用的时候要考虑兼容，和最大储存容量。用的好是跑车，用不好是拖拉机。

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)

1. max-age 指定缓存的最大有效时间，时间之内再次请求资源，不去发送http请求

2. s-maxage 指定public的缓存的最大有效时间，优先级高于max-age,会发送请求，返回状态：304

3. private 用户所独有的缓存，就是单一用户浏览器的缓存。

4. public 公共缓存，例如cdn的，代理服务器的缓存。

5. no-cache 指定缓存是否要发送http请求来询问服务器当前的缓存内容是否还有效，搭配max-age=0使用，有这个属性就会发送http请求询问服务器。

6. 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

总结以上几点：

1. 我们可以使用浏览器储存对象localstorage、cookie、sessionstorage、indexdb等，存储相关的内容

2. 在web app的使用尝试使用service worker，实现pwa的一些理念。

3. 对于图片等静态资源，在我们的服务器上使用协商缓存策略。

其它篇幅传送门：

你不知道的前端性能优化 一 静态资源优化
你不知道的前端性能优化 二 布局于样式
你不知道的前端性能优化 三 缓存优化