1.前端静态文件 Hash 命名面试速记卡

一、核心灵魂问题解答

不加 Hash，上线更新后用户为什么还能看到旧页面？

浏览器会对静态资源（JS/CSS/ 图片等）做强缓存：

• 如果文件名不变，浏览器会直接读取本地缓存，不会向服务器请求新文件，导致用户一直看到旧页面。

• 即使服务器更新了文件，只要 URL 没变，浏览器就会认为资源未更新，继续使用旧缓存。

强缓存、协商缓存和 Hash 有啥关系？

• 强缓存：浏览器直接用本地缓存，不发请求。Hash 的作用就是破坏强缓存：文件内容变了→Hash 变了→URL 变了→浏览器认为是新文件，重新下载。

• 协商缓存：浏览器发请求问服务器资源是否更新。Hash 能配合协商缓存，在文件内容不变时复用缓存，减少请求次数。

• 简单说：Hash 是为了实现「内容变了强制更新，内容不变永久缓存」的精准控制。

内容不改 / 修改，Hash 会怎么变？

• 内容不变 → Hash 不变：浏览器继续复用缓存，提升加载速度、节省流量。

• 内容修改 → Hash 改变：浏览器会把它当作全新文件下载，确保用户拿到最新代码。

---

二、Hash 命名的三大核心价值

解决浏览器强缓存问题（最基础）

通过给静态文件添加内容 Hash（如app.abc123.js），实现：

• 内容变化时，文件名自动改变，强制浏览器下载新文件，避免用户看到旧页面。

• 内容不变时，文件名不变，浏览器继续复用缓存，无需重复请求。

精准更新，不浪费流量（体验优化）

当项目只修改了一个组件时：

• 只有被修改的文件 Hash 会变化，其他未修改的文件 Hash 不变，继续使用缓存。

• 无需全量更新所有资源，用户加载更快，也节省了服务器带宽和用户流量。

保证上线安全，支持版本回滚

• 带 Hash 的多版本资源可以同时存在服务器，不会被覆盖，新旧版本互不干扰。

• 上线出现问题时，可以直接回滚到上一个版本的资源，不会出现文件被覆盖无法恢复的情况。

• 灰度发布时，不同用户访问不同版本的资源也不会出现错乱，避免页面白屏或报错。

---

三、一句话总结

给静态文件加 Hash，本质是为了实现静态资源的精准缓存控制：

• 内容改变则 Hash 改变，强制浏览器更新；

• 内容不变则 Hash 不变，复用缓存提升性能；

• 同时保证了上线发布与回滚的安全性。

图