哪怕您已经通过各种在线工具把网页上的 PNG、WebP 素材都压缩得如同闪线，但如果访客每切换一个子页面、或者每次关掉网页重开时，都要把相同的网站 Logo、页脚背景重新向您的服务器请求下载一遍，不仅会造成流量极大的浪费，还会带来极为难受的“白屏闪烁”感。

1. 强缓存的至优指令：HTTP Cache-Control

当云存储、CDN 节点或者您的业务后端向发出图片报文时，必须积极打包附带 Cache-Control 规则报头，霸道地命令浏览器把该文件存在硬盘里：

http Cache-Control: public, max-age=31536000, immutable

这三个经典单词决定了浏览器的动作：

  • `public`: 表明不仅最底端的终端电脑能缓存它，路途中间架设的 CDN 节点也可以放心将它屯着。
  • `max-age=31536000`: 表明缓存有效期高长达整整 1 年（31,536,000 秒）。在这一年里，用户再次加载此图片时，浏览器不会发起任何网络连接，而是光速直接从用户的本地内存或硬盘（Memory & Disk Cache）中读取！
  • `immutable`: 这是一个至高级的暗示，表示“只要过了这个店图片就绝不会改变”。这样即使访客狂按刷新 F5，浏览器也不会多余去服务器发请求验证内容是否变动。

2. 指纹文件名打法：既长久强缓、又秒速更新

“如果我把 Logo 缓存了整整 1 年。明早我因产品升级需要紧急换个新一版 Logo 的话，我的用户岂不全都看不到新版了？” 为了破解这道矛盾，现代像 Vite、Webpack 等前端自动化构件器采用了内容哈希指纹命名：

text logo.png ───> logo.a8f2c9e7.png

只要你没有修改图标内容，导出名称永远不变，吃死长达1年的本地强缓存；一旦你用设计工具调整过哪怕一像素，导出的哈希文件名立刻会变。主 HTML 页面指向的名字变了，浏览器立刻向网络抓取最新版本，免去了老用户苦等过期刷新，保证体验完美。