浏览器缓存机制

浏览器缓存机制.png

几种缓存资源size对比

状态	size	说明
200	form memory cache	不请求网络资源，资源在内存当中，一般脚本、字体、图片会存在内存当中
200	form disk ceche	不请求网络资源，在磁盘当中，一般非脚本会存在内存当中，如css等
200	资源大小数值	从服务器下载最新资源
304	报文大小	请求服务端发现资源没有更新，使用本地资源

2缓存未过期

这是强制缓存

Expires

Http1.0 属性
返回的是格林乔治时间(绝对时间)，存在服务器时间与本地时间不一致、时区影响的问题

cache-control

Http1.1 属性
相对时间，返回max-age设置资源缓存时间，单位秒，此外还可以设置private\public\no-cache等缓存策略
优先级比Expires 高
no-cache表示强制缓存
no-store 表示不缓存

3强制缓存过期，资源没更新

这是协商缓存

• 浏览器在http header中携带标识发送到服务器，服务器通过对比确认资源是否更新，当没有资源未更新，浏览器继续从本地缓存获取资源，并更新本地强制缓存时间，服务器返回code 304
• 如果服务器发给浏览器的key是Last-Modifyed，浏览器发送给服务器的key是If-Modified_Since，这是资源修改时间
• 如果服务器发给浏览器的key是ETag，浏览器发送给服务器的key是If-Node-Match，这是资源内容的hash值
• 如果两个同时存在，默认情况下ETag优先级高于Last-Modifyed，服务器也可以根据自己的缓存机制需求，选择以哪一个作为判断依据

Last-Modifyed缓存机制的缺点

• Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间
• 如果资源只改变了修改时间，内容没改变，但Last-Modified却改变了，协商缓存失效
• Last-Modified只精确到秒，没有办法更精确的控制缓存

ETag缓存机制的缺点

• 在分布式系统中，相同的资源在不同服务器返回的ETag会是不同的
• 通过资源文件获取 hash 值更耗时

最后，对于正常情况下长期不会改变的资源，可以将过期时间设置很长，让资源在浏览器长期缓存，就算资源真的改变，可以给改变资源路径，路径变了缓存也就失效了

详细的浏览器缓存机制，可参考
https://www.cnblogs.com/duiniweixiao/p/8884274.html