web缓存机制浅析
前端性能优化中，缓存是非常重要的一部分。一个优秀的缓存策略可以很好的降低带宽，节省成本，并且提升用户体验。下面就分别来分析总结在web中常用的缓存类型。
HTTP缓存
HTTP缓存将文件保存在客户端，在刷新，后退或请求同一URL时，根据不同策略会从缓存中取出文件使用，减少了HTTP请求数量。HTTP缓存主要分为两类:协商缓存和强缓存。在讨论这两者区别之前，我们先看看HTTP请求中缓存资源的流程。
HTTP缓存流程
当用户发起静态资源请求时，步骤如下:
- 强缓存阶段: 先在本地查找该资源，如果发现该资源并且没有过期则不发送HTTP请求到服务器。
- 协商缓存阶段: 如果本地发现资源但是不知道是否过期，则发送HTTP请求到服务器进行判断，如果没有改动过返回304使用本地缓存。
- 缓存失败阶段: 当服务器发现请求的资源修改过或者是一个新的请求，则返回资源数据和200。如果没有找到资源则返回404。
缓存阶段的控制主要由缓存策略决定，而缓存策略由内容拥有者设置，主要通过特定的HTTP头部来表达。
强缓存阶段
强缓存阶段相关消息报头为Expires，Cache-Control。
Expires
该字段是http1.0时的规范，值为一个绝对时间的GMT格式字符串，代表资源失效时间。告诉浏览器在过期时间内直接从浏览器缓存读取而无需从服务器再次请求。由于失效时间是绝对时间，所以当服务器和客户端之间时间偏差较大时就会导致缓存混乱。
Cache-Control
与Expires作用一致，指明资源有效期。是HTTP1.1中为了弥补Expires缺陷而新加入的策略。优先级高于Expires。有不同指令，含义如下:
- Public: 指示响应可以被任何缓存区缓存，例如代理服务器或其他中间服务器等共享缓存。
- Private: 指示对于单个用户的整个或部分响应消息不能被共享缓存代理，只能被用户自己的浏览器缓存。
- No-cache: 指示不能被强缓存，需要使用协商缓存。通常用于搜索或翻页结果。因为同样的url对应内容会变化。
- No-store: 直接禁止浏览器强缓存和协商缓存。每次都会下载新的资源。
- Max-age: 指示客户端可以接收生存期不大于指定时间的响应。
- Min-fresh: 指示客户端可以接收响应时间小于指定时间的响应。
- Max-stale: 指示客户机可以接受超出超时期的响应信息。
协商缓存阶段
last-modified/If-Modified-Since
配合cache—control使用。属于http1.0的头信息。
- Last-Modified: 标识服务器上这个响应资源的最后修改时间。浏览器第一次请求一个资源时，服务器会在响应头加上该标识。当资源过期浏览器再次请求时，会向服务器发送If-Modified-Since报头询问资源是否被修改过。
- If-Modified-Since: 该值为缓存之前返回的Last-Modified的值。web服务器收到请求后则与被请求资源的最后修改时间比对。若修改时间较新则说明资源被改动过，需要获取新数据并返回200。若资源无新修改则304，表示继续使用缓存。
Etag/If-None-Match
配合cache-control使用。属于http1.1的头信息。
- Etag: web服务器响应请求时告诉浏览器当前资源在服务器的唯一标识。
- If-None-Match: 当资源过期时发现资源具有Etag声明，则再次请求时带上该请求头，值为Etag。web服务器根据该值与被请求资源进行比对决定返回200或304。
ETag相较于Last-Modified的进步之处:
- Last-Modified只能精确到秒级。
- 如果某些文件定时改变，但有可能不会变化则导致文件无法缓存。
- 有可能服务器没有准确获取修改时间或与代理服务器时间不一致。
- 可以同时存在，优先验证ETag。
无法被缓存的HTTP请求
- HTTP信息头中包含chche-control: no-cache,pragma: no-cache,cache-control:max-age=0等告诉浏览器不用缓存的请求。
- 需要根据cookie，认证信息等决定输入内容的动态请求
- 经过HTTPS加密的请求
- POST请求
- HTTP响应头不包含Last-Modified/ETag,也不包含Cache-Control/Expires的请求无法被缓存。
Service workers缓存
service workers是一项比较新的web技术。可以看做充当客户端和服务器之间的代理服务器，并且用于拦截请求。也就意味着可以在离线环境下响应请求并且为应用添加离线缓存。
在使用之前有以下几点需要注意:
- Service Workers基于https。
- 每个Service Worker都有自己的作用域，存放位置就是它的全局作用域。
- 本质上是web服务器，不能够直接操作DOM。
Service workers有很多新特性，和缓存相关的部分为 Cache Storage。通过这部分API我们可以方便的把客户端的请求以及请求结果缓存起来。 它通过监听fetch事件来捕捉自己作用域下的http请求并可以自行处理返回结果。具体使用方法在以后的Service workers的介绍文章中集中整理。
-- EOF --