浏览器 - 缓存

http 缓存机制分为两种：强制缓存和协商缓存。并且在不同刷新方式下和浏览器环境下对策略的采取会有所区别。

缓存机制

浏览器的缓存策略分为两种：强缓存、协商缓存。

当请求服务器资源时，浏览器会先看本地是否有缓存，如果有缓存，则根据强缓存中的 expires 和 cache-control.max-age 判断缓存是否过期，如果没有过期则直接使用，如果已过期则向服务器请求资源，服务器会根据请求头中的信息判断资源是否能够继续使用，如果文件无变化能够继续使用则返回状态码 304，否则，重新返回状态码 200 和服务器端的资源。

强缓存

通过 expires 和 cache-control 两种响应头实现。

在加载资源的时候，如果被判断为未过期，则直接读取缓存，不会请求服务器，此时返回的状态是 200（from cache）。

Expires

HTTP 1.0 标准中提出，表示资源失效时间，其值为绝对时间，如果本地的时间被修改，那么缓存可能失效。

Expires: Wed, 11 May 2018 07:20:00 GMT

Cache-Control

HTTP 1.1 标准中提出，优先级高于 Expires，其值为相对时间，弥补了 Expires 受本地系统时间的影响。

Cache-Control: max-age=315360000 // 设置最大可缓存时间

Cache-Control 除了 max-age 参数外，还有：

• no-store：不缓存数据到本地；
• no-cache：在提供给本地读取之前，强制要求缓存把请求提交给原始服务器进行验证（协商缓存），其作用等同于设置了max-age=0；
• private：只能被单个用户缓存，不能被共享，CDN 或者代理服务器都不能缓存；
• public：private 取反；

协商缓存

资源从服务器端下载到本地的同时携带了 Etag（资源的哈希值）和 Last-Modified（资源的最后修改时间）这两个响应头。

当某个资源的请求没有命中强缓存（超出 expires 或 cache-control 规定的期限）时，会在请求头中带上 If-None-Match（从服务端获取的 Etag）和 If-Modified-Since（从服务端获取的 Last-Modified） 这两个请求头，让服务端判断是否返回最新的文件、更新 Etag和 Last-Modified。

Etag 的权重要高于 Last-Modified，这是因为 Last-Modified 只能精确到秒，无法应对非常频繁的文件更新。

刷新页面对缓存的影响

刷新页面可以分为三种：

• 正常操作 : 地址栏输入url 、跳转链接、前进后退等，两种缓存都有效；
• 手动刷新 : F5、点击刷新按钮、右击菜单刷新，仅协商缓存有效；
• 强制刷新 : ctrl +f5、cmd + r，两种缓存策略都无效，重新请求资源；