浏览器缓存

强缓存

强缓存：不会向服务器发送请求，直接从缓存中读取资源，在 Chrome 控制台的 Network 选项中可以看到该请求返回 200 的状态码，并且 Size 显示 from disk cache 或 from memory cache。强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

• Expires，http1.0 就有，兼容性更强，指的是缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。受限于本地时间。
• Cache-Control，http1.1，主要用于控制网页缓存规则，可以设置多种组合，度量标准一般取相对时间。

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：

• 协商缓存生效，返回 304 和 Not Modified
• 协商缓存失效，返回 200 和请求结果

协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag 。

• Last-Modified，指代服务器最近一次被修改的时间，单位为s，因此在一秒内经历多次修改的情况无法被检测到，另外，如果本地打开缓存文件，即使没有对文件进行修改，但还是会造成 Last-Modified 被修改，服务端不能命中缓存导致发送相同的资源
• Etag，http 1.1，是服务器响应请求时，返回当前资源文件的一个唯一标识（由服务器生成），只要资源有变化，Etag 就会重新生成。

两者对比：

• Etag比Last-Modified 更准确
• Last-Modified比Etag 性能更好，Etag 包含根据源文件经过算法转化的哈希值，会有一定资源消耗。
• 优先级上，服务器校验优先考虑 Etag

两种缓存对比

强制缓存优先于协商缓存进行，若强制缓存（Expires 和 Cache-Control）生效则直接使用缓存，若不生效则进行协商缓存（Last-Modified / If-Modified-Since 和 Etag / If-None-Match），协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回 200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回 304，继续使用缓存。