前端技能树，面试复习第 38 天—— 浏览器原理：详解浏览器缓存机制 | 协商缓存与强缓存(重点)

Posted 2022-08-02 前端修罗场

⭐️ 本文首发自 前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注 Web 技术、区块链、Web 3、答疑解惑、面试辅导以及职业发展。。

1. 对浏览器的缓存机制的理解

• 浏览器第一次加载资源，服务器返回 200，浏览器从服务器下载资源文件，并缓存资源文件与 response header，以供下次加载时对比使用；
• 下一次加载资源时，由于强制缓存优先级较高，先比较当前时间与上一次返回 200 时的时间差，如果没有超过 cache-control 设置的 max-age，则没有过期，并命中强缓存，直接从本地读取资源。如果浏览器不支持 HTTP1.1，则使用 expires 头判断是否过期；
• 如果资源已过期，则表明强制缓存没有被命中，则开始协商缓存，向服务器发送带有 If-None-Match 和 If-Modi