如何用缓存(Cache)进行前端性能优化？

一、缓存是什么？

缓存是一种保存资源副本并在下次请求时直接使用该副本的技术，可减少等待时间和网络流量，显著提升网站性能。

1、常见缓存

• 私有缓存：只能用于单独用户，譬如浏览器缓存；
• 共享缓存：能被多个用户使用，譬如代理服务器缓存；

2、什么资源会被缓存？

• 用 HTTP 协议 GET 方法请求的资源默认都会被缓存，譬如html文档、图片、文件等；
• 服务器响应中，包含 Cache-Control 头的资源，根据具体指令确定是否要缓存。

3、查看资源的缓存情况？

• 用 chrome 打开网站；
• 打开开发者工具（windows快捷键Control+Shift+J、Mac快捷键Command+Option+J）；
• 下图中的 disk cache 和 memory cache 都是使用了缓存；
• 不要勾选 Disable cache ，勾选意味着禁用缓存功能。

4、查看服务器对缓存的配置？

下图列出服务器返回的资源，只需要点击其中一行，即可显示资源请求和响应的详细信息，图中 Cache-Control 就是服务器对此资源的缓存配置。

二、缓存更新

1、触发缓存的验证请求

资源被更新了，浏览器也必须重新获取资源，才能显示最新版本的网站。下面几种情况都会触发验证请求，如果资源更新了，服务器返回最新资源给客户端，否则客户端继续使用缓存显示页面。

• 点击浏览器的刷新按钮，需要验证；
• 当前时间 大于 响应头 Expires 的时间，需要验证；
• 缓存再本地保存时长 超过 Cache-Control 中 max-age 、s-maxage 的时长，需要验证；
• Cache-Control 被设置为 no-cache，需要验证；

2、缓存验证的过程？

缓存的本地时长超过 Cache-Control 中 max-age 设定的时长时，需要进行缓存验证，图中的验证结果是 304(Not Modified)，表示缓存没有改动，无需更新，可继续使用。

3、缓存验证请求中的头信息

缓存的具体信息(资源id，修改时间等)都在请求头中，服务器对比下这些信息，即可知道缓存是否需要更新。常见的缓存验证的请求头组合：

• ETag + If-Match；ETag + If-None-Match；

ETag 是资源的唯一标识，可以快速确定是否需要返回最新资源给请求方。

• Last-Modified + If-Modified-Since；Last-Modified + If-Unmodified-Since；

这两种是根据时间来确定缓存是否需要更新，通常使用在没有 ETag 的情况。

三、相关 HTTP头 说明

1、Cache-Control

Cache-Control 是 HTTP 协议的请求头和响应头，用于实现缓存功能。单个请求可包含多个指令，用逗号隔开，指令不区分大小写但建议小写。详细用法，看这里！

2、Vary

Vary 是 HTTP 协议的其中一个响应头，代理服务器用它来判断是否存在共享缓存来响应客户，没有就向源服务器发新请求来响应用户。详细用法，看这里！

3、其他相关头

• ETag ：资源的唯一标识符，用于确定缓存资源是否是最新的？
• If-Match、If-None-Match ：用作确定资源 存在或不存在 ？；
• Last-Modified ：表示资源的最后修改时间；
• If-Modified-Since、If-Unmodified-Since ： 在给定时间之后，有或没有 修改过？
• 以上这些属性的详细说明，看这里！

四、Nginx 怎么使用缓存？

Nginx 作为代理服务器，开启缓存功能，可以减轻源服务器的压力，提升整个网站的性能。详情，看这里！

五、参考文档

• # 如何用缓存(Cache)进行前端性能优化？