浏览器缓存机制小结

web性能优化措施中，合理设置浏览器缓存是重要的优化手段之一，它可以加快页面访问速度和节省用户网络带宽等。

简单介绍下相关概念。

Expires 和 Cache-Control

Expires出自HTTP1.0，Cache-Control出自HTTP1.1，同时设置两者时，Cache-Control 会覆盖 Expires。

Expires

Expires指定的是实际过期日期而不是秒数。但Expires存在一些问题，如服务器时间不同步或不准确。所以最好使用剩余秒数而不是绝对时间来表达过期时间。

Cache-Control

Cache-Control可设置max-age值，单位秒，指定缓存过期时间。如：Cache-Control: max-age=3600。

ETag 和 Last-Modified

ETag 和 Last-Modified都由服务器返回在response headers中，其中ETag的优先级比Last-Modified高，也就是说服务器会优先判断ETag的值。

ETag

ETag是附加到文档上的任意标签，可能是文档的序列号或版本号，或者是文档内容的校验等。当文档改变时ETag值也会随之改变。与ETag相关的是 If-None-Match，当浏览器发起请求时，会在If-None-Match字段携带ETag的值发给服务器；

Last-Modified

Last-Modified是文档在服务器端最后被修改的时间。与Last-Modified相关的是If-Modified-Since，当浏览器发起请求时，会在If-Modified-Since字段携带Last-Modified的值发送给服务器。

强缓存和协商缓存

强缓存

与强缓存有关的是 Expires 和 Cache-Control，若还在设定的时间范围内，则命中强缓存，浏览器不会向服务器发起请求，直接读取本地缓存。它的返回码是200，在控制台network的size栏可以看到form disk cache或from memory cache。

协商缓存

与协商缓存有关的是 ETag 和 Last-Modified，当服务器收到If-None-Match字段和If-Modified-Since字段携带的信息后。若匹配成功，则命中协商缓存，服务器返回304 Not Modified；若匹配不成功，服务器返回200和新的资源。

如何配置浏览器缓存

• 在web服务器的返回响应中添加Expires和Cache-Control；
• 在nginx或apache的配置文件中配置Expires和Cache-Control。

小结

• 缓存的类型强缓存和协商缓存。两者区别是，强缓存不会向服务器发请求，而协商缓存会发请求，匹配成功返回304 Not Modified，匹配不成功返回200；
• 浏览器会先校验强缓存，若强缓存未命中，再进行协商缓存校验。
• ETag的优先级高于Last-Modified，因此协商缓存中服务器会优先判断ETag的值；
• F5刷新，会跳过强缓存校验，直接进行协商缓存校验；Ctrl+F5刷新，会跳过强缓存和协商缓存校验，直接向服务器请求数据。