HTML / CSS大前端
浏览器缓存机制详解与前端代码更新缓存解决方案
浏览器缓存机制包含强缓存与协商缓存。前端更新常因缓存失效。核心方案为基于文件内容的哈希命名，使 URL 随内容变更。HTML 设置无缓存，静态资源设置长期缓存并启用 immutable。构建工具生成带哈希文件名，服务器配置控制响应头。该策略兼顾性能与更新可靠性。
浏览器缓存机制包含强缓存与协商缓存。前端更新常因缓存失效。核心方案为基于文件内容的哈希命名，使 URL 随内容变更。HTML 设置无缓存，静态资源设置长期缓存并启用 immutable。构建工具生成带哈希文件名，服务器配置控制响应头。该策略兼顾性能与更新可靠性。
浏览器缓存主要分为两类：强缓存和协商缓存。它们像两道关卡，决定了资源是从本地加载还是从服务器获取。
强缓存是指浏览器在缓存有效期内，直接使用本地副本，不发送任何请求。它由以下两个 HTTP 响应头控制：
Expires: Wed, 21 Oct 2025 07:28:00 GMT）。缺点是依赖客户端时间，容易出问题。max-age=3600：资源在 3600 秒内有效。public：允许所有中间节点（如 CDN）缓存。private：只允许浏览器缓存。no-cache：不直接使用强缓存，但允许协商缓存（后面解释）。no-store：完全禁用缓存，每次都请求服务器。当强缓存命中时，浏览器直接从磁盘或内存中读取资源，Network 面板显示 200 (from disk cache) 或 200 (from memory cache)。
当强缓存过期（或设置了 no-cache）时，浏览器会携带缓存的标识向服务器发起请求，由服务器判断资源是否更新。如果未更新，返回 304 状态码，告诉浏览器继续使用缓存；如果已更新，返回 200 和新资源。
协商缓存也由两组响应头/请求头控制：
Last-Modified: 文件最后修改时间。If-Modified-Since: 上次返回的时间。ETag: "xxxx"。If-None-Match: "xxxx"。我们的前端资源通常包括：HTML、JS、CSS、图片等。它们有不同的缓存策略需求：
<script src="app.js">）。如果所有资源都设置长期缓存，那么代码更新后，用户访问页面时，HTML 可能还是旧的，引用的也是旧的 JS/CSS，导致新功能无法生效。这就是典型的'缓存更新问题'。
核心思想：让资源 URL 随内容变化而变化。这样，即使资源被长期缓存，当内容变化时，URL 也会变化，浏览器自然就会请求新资源。
使用构建工具（Webpack、Vite 等）在文件名中注入内容哈希：
output: {
filename: '[name].[contenthash:8].js',
chunkFilename: '[name].[contenthash:8].chunk.js'
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash:8].css'
})
]
这样生成的文件名类似于 main.3a2b5f7e.js、main.8c3d9e.css。文件内容变化，哈希值就变化，URL 也就变了。
HTML 文件应该设置较短的缓存时间，或者直接禁用缓存，确保每次请求都拿到最新的资源引用。
通过服务器配置（以 Nginx 为例）：
location / { # 对 HTML 文件设置 no-cache，强制每次验证
if ($request_uri ~* \.html$) {
add_header Cache-Control "no-cache, must-revalidate";
}
# 对 JS/CSS 等静态资源设置长期缓存
if ($request_uri ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$) {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
或者在 HTML 的 meta 标签中设置（不推荐，因代理服务器可能忽略）：
<meta http-equiv="Cache-Control" content="no-cache">
如果使用了 CDN，需要协调 CDN 缓存策略。一般原则：
Cache-Control: no-cache 或较短的 max-age，并开启 CDN 的'回源验证'功能，确保每次请求都回源检查。带哈希的文件长期缓存后，旧版本的文件不会被删除，会一直占据 CDN 和服务器空间。解决方案：
clean-webpack-plugin）。/v1/, /v2/）来管理。immutable 指令对于带哈希的文件，可以在 Cache-Control 中添加 immutable 指令，告诉浏览器'这个文件永远不会变'，可以放心缓存。浏览器收到 immutable 后，甚至不会发送条件请求，直接使用缓存。这能进一步提升性能。
Cache-Control: max-age=31536000, immutable
对于 HTML 等需要验证的资源，保留 ETag 和 Last-Modified，让协商缓存起作用。
API 接口通常不应被浏览器缓存，或者根据业务需求设置合适的缓存策略。建议设置：
Cache-Control: no-cache, no-store, must-revalidate
app.js，style.css，index.htmlapp.js 后，用户仍然请求旧 app.js，功能失效。app.abc123.js，style.def456.css。.js|.css 等设置 max-age=31536000, immutable。index.html 设置 no-cache 并启用 ETag。index.html 自动更新引用为新的哈希文件。有些代理服务器（如企业网关）可能会无视 Cache-Control 强制缓存。解决方案：在 URL 中加入版本号或时间戳，但会破坏长期缓存的优势。折衷方案：使用 private 指令，只允许浏览器缓存，不允许中间代理缓存。
Webpack 的 [contenthash] 在不同构建间可能因为模块顺序变化而变化，即使内容没变。解决方案：使用 optimization.moduleIds: 'deterministic' 和 optimization.chunkIds: 'deterministic' 确保模块 ID 稳定。
每个 HTML 都需要独立配置缓存策略，并且要确保引用的资源路径正确。可以使用 HtmlWebpackPlugin 自动注入带哈希的资源。
图片通常不常变化，也可以使用哈希命名，设置长期缓存。如果图片需要替换，但希望保持相同 URL（如用户头像），则不能使用哈希，而应设置合适的缓存时间并配合版本号参数。
Cache-Control: no-cache，配合 ETag 协商缓存。Cache-Control: max-age=31536000, immutable，永久缓存。no-cache 或短时缓存。contenthash 确保 URL 随内容变化。遵循这套策略，你就能彻底解决前端代码更新后的缓存问题，既保证了性能，又实现了无缝更新。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online