Skip to main content

chrome中三种加载模式与http缓存的关系

Chrome 中的三种加载模式​

作为开发人员，我们平时打开控制台时，浏览器刷新按钮右键会展示三种加载模式，分别是：

  • 正常重新加载
  • 硬性重新加载
  • 清空缓存并硬性重新加载

正常重新加载​

  • windows: ctrl + r (等同于 F5)
  • mac: command + r

这种加载模式就是常说的“刷新网页”，和直接点击浏览器中的刷新按钮效果一致，这种场景大多数资源会命中强缓存（大部分从memory cache中读取）

硬性重新加载​

  • windows: ctrl + shift + r (等同于 ctrl + F5)
  • mac: command + shift + r

硬性重新加载相当于强制刷新网页，进行这个操作后，可以看到所有资源都重新向服务器获取，检查请求报头会发现使用硬性重新加载后所有资源的请求首部都被加上了 cache-control: no-cache 和 pragma: no-cache, 这俩都意味着告知（代理）服务器不直接使用缓存，向源服务器发起请求， pragma 是为了兼容 HTTP/1.0

所以说硬性重新加载没有清空缓存而是禁用缓存，类似控制台 Network 面板勾选 Disable cache 选项

硬性重新加载没有清空缓存，异步资源在页面载入完成后插入时，加载依然优先缓存

清空缓存并硬性重新加载​

会将浏览器存储的本地缓存都清空，再重新向服务器发送请求，所有访问过的网站缓存都被清除

特殊场景​

有一个特殊的情况就是 base 64 图片，这种资源不管是首次加载还是清空缓存都不生效，base 64 本质是一堆字符串，伴随页面渲染而加载，浏览器解析会消耗性能，所以会被硬塞进 memory cache