浏览器缓存策略

浏览器缓存类型

1. 强缓存
2. 协商缓存

缓存获取流程

1. 根据http header判断是否命中强缓存，如果命中，返回200状态码，让客户端直接从本地缓存中获取资源，不会向服务器请求资源
2. 当没有命中强缓存时，客户端会发送请求到服务器，服务器通过request header验证该资源是否命中协商缓存
3. 如果命中协商缓存，服务器直接返回请求（304状态码），不返回资源，告诉客户端直接从本地缓存中获取资源
4. 如果未命中协商缓存，服务器在返回请求的同时（200状态码）将资源也返回给客户端

F5与Ctrl+F5的区别

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

强缓存

1. 强缓存类型
2. 内存缓存（from memory cache）：
3. 内存缓存读取速度快
4. 时效性很短（会随着进程的释放而释放）
5. 小文件优先存入内存缓存（js和图片一般也是放内存缓存，因为脚本可能随时要执行，如果脚本在磁盘当中，执行脚本的时候需要进行I/O操作，频繁操作开销过大的话可能会导致浏览器失去响应）
6. 硬盘缓存（from disk cache）：
7. 可存储量大，需要进行I/O操作
8. 读取复杂，速度比内存缓存慢
9. 大文件一般存在硬盘缓存（CSS一般也是放在硬盘缓存中，因为CSS样式加载一次即可渲染出网页）
10. 匹配优先级
11. 先去内存看，如果有，直接加载
12. 如果内存没有，则去硬盘获取，如果硬盘上有则直接加载
13. 如果硬盘也没有，那么就进行网络请求
14. 加载到的资源缓存到硬盘和内存
15. 对比
    

1. 强缓存控制方式
2. 设置缓存过期的绝对时间Expires，如：Thu， 18 Apr 2019 06:15:31 GMT；
3. 设置cache-control
4. max-age=xxx，最大的有效时间，单位是秒
5. must-revalidate，如果超过了max-age的时间，必须向服务器发送请求，验证资源的有效性
6. no-cache，基本等价于max-age=0，由协商缓存来决定是否缓存资源
7. no-store，真正意义上的不缓存
8. public，所有内容都可以被缓存
9. 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