滴滴实习一面：浏览器缓存机制

这是之前一个27同学面滴滴实习的题目，部门是体验平台，针对浏览器缓存问了强弱缓存区别以及使用场景等问题，小圆这边整理好了～

浏览器缓存是前端性能优化中最重要的一环。合理利用缓存，不仅能显著提升页面加载速度、减少服务器压力，还能改善用户体验。但在面试中，很多人只会“Cache-Control、ETag、Expires”这几个名词，却说不清底层逻辑与交互过程。本文讲解浏览器缓存机制，从类型、原理到实践配置，帮你彻底吃透这个高频考点。 

一、缓存的分类概览

浏览器缓存大体分为两类：

二者的关系可以概括为：强缓存优先，未命中后再进入协商缓存。

二、强缓存机制详解

1. 触发时机

当浏览器请求某个资源时，会先检查本地缓存是否可用（即强缓存是否命中）。

2. 核心字段

（1）Cache-Control

现代浏览器主推的缓存控制头，它的优先级高于 Expires。常见取值如下：

（2）Expires

HTTP/1.0 时代的产物，通过绝对时间控制缓存失效，如：

Expires: Wed, 22 Oct 2025 12:00:00 GMT

缺点是依赖客户端时间，易受系统时间差影响。

3. 强缓存的优先级判定

浏览器判断逻辑如下：

if (Cache-Control 存在) → 使用 Cache-Control
else if (Expires 存在) → 使用 Expires
else → 不使用强缓存

四、协商缓存机制详解

当强缓存失效后，浏览器会携带部分资源标识向服务器发起请求，询问资源是否更新。若服务器确认资源未变更，则返回 304 Not Modified，浏览器直接使用本地缓存副本。

1. 核心字段

（1）Last-Modified / If-Modified-Since

• 服务器首次响应：

Last-Modified: Wed, 22 Oct 2025 10:00:00 GMT

• 浏览器下一次请求时：

If-Modified-Since: Wed, 22 Oct 2025 10:00:00 GMT

若服务器判断文件无更新，则返回 304。

缺点：

• 时间精度以秒为单位，若文件在一秒内被多次修改，可能检测不到更新。
• 一些文件周期性重新生成，即使内容相同，时间不同也会触发重新下载。

（2）ETag / If-None-Match

ETag 是资源内容的唯一标识（通常是哈希值）。

• 服务器首次响应：

ETag: "filehash-12345"

• 浏览器下一次请求时：

If-None-Match: "filehash-12345"

若 ETag 一致，则返回 304。

优点：精度更高，不依赖时间。缺点：计算 ETag 会增加服务器负担。

一般做法：两组字段（ETag / Last-Modified）常同时使用，保证兼容性与准确性。

五、缓存的整体流程

浏览器加载资源时的完整判断流程如下：

1. 检查强缓存（Cache-Control、Expires）
2. 发起请求携带验证字段（If-Modified-Since 或 If-None-Match）。
3. 服务器判断资源是否变动：

六、缓存位置与生命周期

缓存可存在多个层次：

浏览器通常会根据资源类型与大小选择合适的存储位置。

七、实际项目中的应用策略

1. 静态资源（JS/CSS/图片）

• 使用文件指纹（hash）解决更新问题；
• 设置长时间缓存：

Cache-Control: max-age=31536000, immutable

• 文件变更时文件名变化，浏览器自动拉取新版本。

2. 接口请求（API）

• 频繁变化 → 使用 no-cache 或 no-store；
• GET 接口若数据稳定，可考虑 ETag 提升性能。

3. HTML 页面

• 通常设置为 no-cache；
• 通过版本号或构建标识控制更新。

总结

前端常用的缓存方案一般采用强缓存与协商缓存相结合的方式，具体是：

1. HTML文档配置协商缓存

2. JS、CSS、图片等资源配置强缓存

这样当项目版本更新时，可以获取最新的页面；若版本未更新，则可以继续复用之前的缓存

八、前端开发者常见误区

1. 误区1：no-cache 就是不缓存实际上，它只是强缓存失效，仍可能走协商缓存。
2. 误区2：ETag 与 Last-Modified 互斥它们可以并存，服务器优先验证 ETag，再验证时间。
3. 误区3：缓存设置全交给后端前端在构建环节（Webpack/Vite）也能配置静态资源 hash 与缓存策略。

总结

浏览器缓存机制是 Web 性能优化的基石。可以用一句话总结它的核心逻辑：先看强缓存（Cache-Control、Expires），再看协商缓存（ETag、Last-Modified）。命中即本地读取，未命中则询问服务器是否更新。

面试时若能把流程、字段、优缺点等等讲清楚，并结合项目实践（比如资源指纹 + CDN 缓存策略），可以给面试官留下好印象哦。