浏览器缓存策略

​

浏览器缓存类型

1. 强缓存

2. 协商缓存

 

缓存获取流程

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

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

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

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

    

F5与Ctrl+F5的区别

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

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

 

强缓存

1. 强缓存类型

   1. 内存缓存（from memory cache）：

      1. 内存缓存读取速度快

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

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

   2. 硬盘缓存（from disk cache）：

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

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

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

2. 匹配优先级

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

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

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

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

3. 对比

   

4. 强缓存控制方式

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

   2. 设置cache-control

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

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

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

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

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

      6. 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

 

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