浏览器缓存策略

​

浏览器缓存类型

1. 强缓存

2. 协商缓存

缓存获取流程

1. 根据http header判断是否命中强缓存，如果命中，返回200状态码，让客户端直接从本地缓存中获取资源，不会向服务器请求资源

2. 当没有命中强缓存时，客户端会发送请求到服务器，服务器通过request header验证该资源是否命中协商缓存

3. 如果命中协商缓存，服务器直接返回请求（304状态码），不返回资源，告诉客户端直接从本地缓存中获取资源

4. 如果未命中协商缓存，服务器在返回请求的同时（200状态码）将资源也返回给客户端

F5与Ctrl+F5的区别

1. F5：跳过强缓存，但会检查协商缓存

2. Ctrl+F5：直接从服务器加载，跳过强缓存和协商缓存

强缓存

1. 强缓存类型
   

• 内存缓存（from memory cache）：

• 内存缓存读取速度快

• 时效性很短（会随着进程的释放而释放）

• 小文件优先存入内存缓存（js和图片一般也是放内存缓存，因为脚本可能随时要执行，如果脚本在磁盘当中，执行脚本的时候需要进行I/O操作，频繁操作开销过大的话可能会导致浏览器失去响应）

• 硬盘缓存（from disk cache）：

• 可存储量大，需要进行I/O操作

• 读取复杂，速度比内存缓存慢

• 大文件一般存在硬盘缓存（CSS一般也是放在硬盘缓存中，因为CSS样式加载一次即可渲染出网页）

2. 匹配优先级

• 先去内存看，如果有，直接加载

• 如果内存没有，则去硬盘获取，如果硬盘上有则直接加载

• 如果硬盘也没有，那么就进行网络请求

• 加载到的资源缓存到硬盘和内存

3. 对比
   

   

4. 强缓存控制方式

• 设置缓存过期的绝对时间Expires，如：Thu, 18 Apr 2019 06:15:31 GMT；

• 设置cache-control

• max-age=xxx，最大的有效时间，单位是秒

• must-revalidate，如果超过了max-age的时间，必须向服务器发送请求，验证资源的有效性

• no-cache，基本等价于max-age=0，由协商缓存来决定是否缓存资源

• no-store，真正意义上的不缓存

• public，所有内容都可以被缓存

• private，所有内容只有客户端可以缓存，代理服务器不能缓存（默认值）

协商缓存

1. Last-Modified：资源最后的更新时间，随着服务器的response返回

2. If-Modified-Since：通过和Last-Modified做比较来判断资源在两次请求期间是否有过修改，如果没有就命中协商请求

3. 如果资源变化的时间间隔小于秒级，比如说是毫秒级的，或者说资源直接是动态生成的，那根据Last-Modified判断，资源就是每时每刻都最新的，而Etag & If-Node-Match则可以用来解决这个问题；服务器通过请求头部的If-None-Match与当前资源的ETag是否一致来表示资源在两次请求中是否有过修改，如果没有修改，则命中协商缓存

参考资料

1. https://blog.csdn.net/weixin_44369568/article/details/92721315

2. https://blog.csdn.net/fengnext/article/details/100172186

3. https://www.jianshu.com/p/946f475a9075

4. https://www.jianshu.com/p/fd00f0d02f5f
   

微信公众号“前端那些事儿”