2024年网站缓存你知道多少？什么是浏览器缓存?
分享一些实用或有意思的东西，发现代码之美。专注深度和最佳实践，希望打造的是一个高质量的公众号。
在前端开发中，我们在提到性能优化的时候总会提到一点：合理设置缓存。我们该如何从这方面入手来考虑提高网站性能呢？
前言
我们都知道 HTML5 引入了应用程序缓存，可以在没有网络的情况下进行访问，同时，HTML5 还引入了 storage 本地存储。这些都属于应用缓存。
本篇文章主要内容是和浏览器缓存相关的，也可以说是 HTTP 缓存。
什么是浏览器缓存
MDN 上是这样解释浏览器缓存的：
A browser cache holds all documents downloaded via HTTP by the user … without requiring an additional trip to the server.
意思就是，浏览器缓存保存着用户通过 HTTP 获取的所有资源，再下一次请求时可以避免重复向服务器发出多余的请求。
通俗的说，就是在你访问过一次某个网站之后，这个站点的文字、图片等所有资源都被下载到本地了，下次再访问该网站时判断是否满足缓存条件，如果满足就不用再花费时间去等待资源的获取了。
浏览器缓存的分类
一般来说浏览器缓存可以分为两类：
- 强缓存
- 协商缓存（对比缓存）
我们需要知道的是，浏览器在加载资源时，会先判断是否命中强缓存再验证是命中协商缓存。
其它的的具体细节，稍后会展开来说。
强缓存
浏览器在加载资源时，会先根据本地缓存资源的 header 中的信息判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。
从图中可以看出，强缓存一般是这样一个流程：
- 查看 header 头中的 Expire 和 Cache-control 来判断是否满足规则；
- 如果满足规则，就返回缓存的数据；
- 如果不满足规则，就向服务器发送请求；
- 服务器返回数据；
- 将新数据存入缓存。
所以我们主要就是关注 Expire 和 Cache-control 这两个字段。
Expire
同样地，我们看看MDN中如何解释这个字段：
微信扫码上方二维码，可领取2025年最新互联网创业项目！
项目收款截图
推荐阅读：