浏览器缓存机制
2018-11-09 本文已影响62人
琢磨先生lf
浏览器缓存机制.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