前端缓存小结

最近看了一些关于前端缓存的文章，很多都是概念上的规定，所以记录一下。

首先，缓存发生在浏览器收到服务器的响应数据，此时，为了避免以后需要重新访问，减少网络请求次数，就要判断是否需要缓存数据资源。这个判断操作，前端后端都可以进行，前端的话，在html的meta里可以设置（有些浏览器不支持）这段代码表示启用缓存，数据有效时间为60000s，max-age, cache-control后面再说。

<meta http-equiv="Cache-Control" content="max-age=60000" />

或者后端在响应头里进行设置

Cache-control: max-age=60000

这种缓存是最为常见也是最为有效的，称为强缓存。强缓存，顾名思义，就是强制缓存，但是缓存是有时效的，不可能一直存在，时效过了以后缓存就会被浏览器清理，需要重新验证。Cache-control是http1.1以后出现的字段，专门用于管理缓存，http1.0用的是Expire字段，实际项目中，为了兼容所有浏览器，这两个字段都会进行设置，但Cache-control优先级高于Expire。

Cache-control的常用可选值有以下几种：

• max-age：即最大有效时间，在上面的例子中我们可以看到
• must-revalidate：如果超过了 max-age 的时间，浏览器必须向服务器发送请求，验证资源是否还有效。
• no-cache：虽然字面意思是“不要缓存”，但实际上还是要求客户端缓存内容的，只是是否使用这个内容由后续的对比来决定。
• no-store: 真正意义上的“不要缓存”。所有内容都不走缓存，包括强制和对比。
• public：所有的内容都可以被缓存 (包括客户端和代理服务器， 如 CDN)
• private：所有的内容只有客户端才可以缓存，代理服务器不能缓存。默认值。

需要注意两点：

1. public， private与其他属性值不冲突，如Cache-control：public， max-age=60000。

2. no-cache， 指的是再次访问时，不要直接使用缓存，需要向服务器验证内容是否有效再决定是否用缓存。而不是不要缓存。这种方法常用于，数据经常需要更新的情况。比如博客。（http1.0使用Pagram: no-cache字段）

刚刚提到了强缓存，有强就有弱，弱缓存（自己编的）被称为协商缓存或者是对比缓存。我比较喜欢叫协商缓存，协商缓存是强缓存的替补方案，只有在强缓存设置的有效时间过期后，才会启用协商缓存。

协商缓存也会用到两个字段，Last-Modified和If-Modified-Since 。客户端每次向服务端请求资源后，服务端都会把该资源的最后修改时间放在响应头中的Last-Modified字段中传给客户端，客户端会把它存在缓存中，当再次请求该资源时候，客户端会把Last-Modified的值放在请求头的If-Modified-Since字段中传给服务端，服务端比较这个值和该资源最后修改时间，如果相同说明该资源没有修改，可以直接用缓存，就会返回304。而不是重新再返回一遍数据，简化了响应体的体积，也是一定程度的优化。但是如果发现值不同，那就返回200以及新的数据。 从上面的流程来看，协商缓存和没有缓存（no-store）的网络请求数是一样的，只不过返回可能会有些不同。

上面说到的Last-Modified存在一些问题，他只能精确到秒，如果一秒内进行多次请求，就无法识别。所以有两个新的字段来判断E-tag和If-None-Match，E-tag表示该资源的唯一标识符，用法和Last-Modified和If-Modified-Since相同。但是E-tag优先级高于Last-Modified。

上面说了强缓存和协商缓存的过程，但是没有说缓存的位置，无论是强缓存还是协商缓存，都是存储在disk cache，也就是硬盘的缓存里。实际上，在浏览器请求资源的时候，首先check的并不是disk cache，而是memory cache即内存的缓存，内存的缓存容量比较小，但读取速度很快，在关掉tab的时候就会清空。

整个check流程可以归结成酱紫：

• 查看 memory cache
• 查看 disk cache。这里又细分：
  1. 如果有强制缓存且未失效，则使用强制缓存，不请求服务器。这时的状态码全部是 200
  2. 如果有强制缓存但已失效，使用对比缓存，比较后确定 304 还是 200
• 发送网络请求，等待网络响应
• 把响应内容存入 disk cache (如果 HTTP 头信息配置可以存的话)
• 把响应内容 的引用 存入 memory cache (无视 HTTP 头信息的配置)