浏览器缓存的起点 -> Cache-Control

先介绍一个关键字段 Cache-Control ，位与响应头，告诉浏览器该资源应当如何缓存

Cache-Control 的几种常见的配置

max-age：设置强制缓存的时间，单位s。资源会缓存到本地
no-cache：设置不强制缓存，每次都去进行协商缓存，确定资源是否有变更，一般用在index.html。资源会缓存到本地
no-store：不进行强制缓存和协商缓存，直接拉取最新的资源。资源不缓存到本地。
private：如果有这个字段比如：Cache-Control: private, max-age=360000，意思：中间层（代理）或者说CDN 不缓存此资源，使CDN失效，每次只能访问源服务器
public：CDN可以缓存

Cache-Control: max-age=315360000
使用场景：CDN（一般永远不变）
效果：缓存10年

Cache-Control: max-age=31536000
使用场景：比如图片资源（几乎不变）
效果：缓存1年

Cache-Control: max-age=2592000
使用场景：比如js，css资源（按月迭代，较少频率改变）
效果：缓存1月

Cache-Control: no-cache
使用场景：webpack工程的 SPA单页面的入口 index.html（可能频繁改变）
效果：每次都要发起协商缓存，去询问资源是否变更，无变更则304重定向

理论上是前端定好缓存策略（我的另一篇juejin.cn/post/694315… ）后，需要给到运维，运维按前端的要求去配置。

如果没有配置，浏览器是不是就不会缓存了？

答：否，浏览器有自己的优化策略（毕竟要让自己家的浏览器使用起来更快！强制给你弄缓存）

没有设置 Cache-Control，Expires。chorme浏览器具体策略：

第一次：协商缓存，询问服务端，资源是否改变，已改变则发起请求。没改变的话，304重定向，并根据响应头的date和last-modified计算出强制缓存的时间（类似强制设置 Cache-Control: max-age=xx）

第二次开始：就有强制缓存了，状态码为200

memory cache 和 disk cache

Chrome 究竟会在什么情况下使用 memory cache，什么情况下使用 disk cache 呢？

我们可以打开一个新的tab页面，打开 "Network"，刷新一下，看到缓存的 .js 都是 "from memory"（.css 不会走 memory cache，都是 "from disk"）。
现在我们关闭当前tab（或关闭浏览器），重新再打开之前的 tab 时，缓存的 .js 都是 "from disk" 了。
- 因为当 .js 等资源被加载时，浏览器会先将其放入 memory cache 中，而当此页面tab被关闭时，浏览器会将此页面的 memory cache 中的缓存文件转存到 disk cache 中持久化存储。

Cache-Control （http 1.1） > Expires（http 1.0）

码字不易，点赞鼓励

性能优化合集快速入口：