浏览器缓存机制小结

最新推荐文章于 2024-07-08 20:22:45 发布

weixin_34295316

最新推荐文章于 2024-07-08 20:22:45 发布

阅读量46

点赞数

文章标签：运维

原文链接：https://segmentfault.com/a/1190000014969773

版权

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

简单介绍下相关概念。

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

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

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

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

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

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和新的资源。

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

关注