浏览器缓存策略解析
极客时间编辑部
讲述：丁婵大小：7.87M时长：05:44
你好，欢迎收听极客视点。
浏览器缓存策略对于前端开发者来说不陌生，但如果没有系统的归纳总结，可能三言两语很难说明白，甚至说错。最近，腾讯音乐前端开发工程师 kevinylzhao 在公众号“腾讯技术工程（ID：Tencent_TEG）”发文重新归纳总结了浏览器缓存策略，帮助你温故而知新。
Web 缓存介绍
Web 缓存是指一个 Web 资源（如 html 页面，图片，js，数据等）存在于 Web 服务器和客户端（浏览器）之间的副本。它可以减少网络延迟，加快页面打开速度，减少网络带宽消耗，降低服务器压力。
HTTP 的缓存机制
缓存规则如下：
新鲜度：也就是缓存副本有效期。一个缓存副本必须被浏览器认为它是有效的、足够新的：
含有完整的过期时间控制头信息（HTTP 协议报头），并且仍在有效期内；
浏览器已经使用过这个缓存副本，并且在一个会话中已经检查过新鲜度；
校验值（验证机制）：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签 Etag（Entity Tag），它可以用来作为浏览器再次请求过程的校验标识。如果发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。
HTTP 缓存的两个阶段
浏览器缓存一般分为两类：强缓存，也称本地缓存；以及弱缓存，也就是协商缓存。
本地缓存阶段
浏览器发送请求前，会先去缓存里查看是否命中强缓存，如果命中，则直接从缓存中读取资源，不会发送请求到服务器。否则，进入下一步。
协商缓存阶段
当强缓存没有命中时，浏览器一定会向服务器发起请求。服务器会根据 Request Header 中的一些字段来判断是否命中协商缓存。如果命中，服务器会返回 304 响应，但是不会携带任何响应实体，只是告诉浏览器可以直接从浏览器缓存中获取这个资源。如果本地缓存和协商缓存都没有命中，则直接从服务器加载资源。
例如常见两种刷新场景：
当 F5 刷新网页时，跳过强缓存，但是会检查协商缓存；
当 Ctrl + F5 强制刷新页面时，直接从服务器加载，跳过强缓存和协商缓存。
缓存位置
浏览器可以在内存、硬盘中开辟一个空间用于保存请求资源副本。调试时在 DevTools Network 里看到 Memory Cache（內存缓存）和 Disk Cache（硬盘缓存），指的就是缓存所在的位置。请求一个资源时，会按照优先级（Service Worker -> Memory Cache -> Disk Cache -> Push Cache）依次查找缓存，如果命中则使用缓存，否则发起请求。这里先介绍 Memory Cache 和 Disk Cache。
Memory Cache
直接从内存中读取缓存。因为缓存的资源保存在内存中，所以读取速度较快，但是关闭进程后，缓存资源也会随之销毁，一般来说，系统不会给内存分配较大的容量，因此内存缓存一般用于存储较小文件。同时内存缓存在有时效性要求的场景下也很有用（比如浏览器的隐私模式）。
Disk Cache
直接从硬盘中读取缓存。与内存相比，硬盘的读取速度相对较慢，但硬盘缓存持续的时间更长，关闭进程之后，缓存的资源仍然存在。由于硬盘的容量较大，因此一般用于存储大文件。
缓存策略
基于以上的 HTTP 的缓存机制，总结一些缓存策略的优化点，如下：
使用一致的网址：如果你在不同的网址上提供相同的内容，将会多次获取和存储该内容。注意 URL 要区分大小写。
确定中继缓存可以缓存哪些资源：对所有用户的响应完全相同的资源很适合由 CDN 或其他中继缓存进行缓存。
确定每个资源的最优缓存周期：不同的资源可能有不同的更新要求。审查并确定每个资源适合的 Max-age。
确定网站的最佳缓存层级：对 HTML 文档组合使用包含内容特征码的资源网址以及短时间或 No-cache 的生命周期，可以控制客户端获取更新的速度。
更新最小化：有些资源的更新比其他资源频繁。如果资源的特定部分（例如 JS 函数或一组 CSS 样式）会经常更新，应考虑将其代码作为单独的文件提供。这样，每次获取更新时，剩余内容如不会频繁更新的库代码可以从缓存中获取，确保下载的内容量最少。
确保服务器配置或移除 ETag：因为 Etag 跟服务器配置有关，每台服务器的 Etag 都是不同的。
善用 HTML5 的缓存机制：合理设计启用 LocalStorage、SessionStorage、IndexDB、SW 等存储，会给页面性能带来明显提升。
结合 Native 的强大存储能力：善于利用客户端能力，定制合适的缓存机制，打造极致体验。
结语
以上就是今天的内容，希望能帮助你通过了解浏览器各种缓存机制和存储能力特点，结合业务制定合适的缓存策略。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》，如需阅读全部文章，
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(1)
- 最新
- 精选
静猫一一一一一一一一一一一一一老师您好，我想请教一下，微信公众号每次上线以后需要手动刷新页面才显示新更新的样式和结构。这个是什么原理如何解决呢归属地：北京
收起评论