你有没有遇到过这样的情况：改完网站的样式，刷新页面却发现还是老样子？明明更新了按钮颜色，可用户看到的还是蓝色而不是新的绿色。这种情况八成是被缓存坑了。浏览器为了加快加载速度，会把JS、CSS和图片这些静态资源存一份在本地，下次访问直接用旧的，省得再下载一遍。但开发或更新时，这就成了麻烦。
为什么缓存会带来问题
比如你公司上线了一个新活动页面，设计师换了背景图，前端也更新了交互逻辑。可客户反馈说看不到新图，点按钮也没反应。你本地看没问题，一上线就出状况。原因很简单：用户的浏览器还在用之前缓存的旧文件。JS没更新，功能失效；CSS没生效，样式错乱；图片没替换，看起来像没改过。
给文件名加版本号是最稳的办法
最直接的解决方式是在引用文件时加上版本标识。比如：
<link rel="stylesheet" href="style.css?v=1.2">
<script src="app.js?v=1.2"></script>
<img src="banner.jpg?t=20240405" alt="活动横幅">每次更新文件，只要改一下?后面的内容，浏览器就会当成一个新地址去请求，自然就能拿到最新版。这个方法简单粗暴，适合小团队或者没有复杂构建流程的项目。
用哈希值代替手动版本号更智能
如果你用Webpack、Vite这类工具打包，可以配置输出文件名带内容哈希。例如把app.js变成app.a1b2c3d.js。只要文件内容变了，哈希值就变，文件名也就跟着变。这样既能长期缓存，又能保证更新后立即生效。
HTML里引用的是带哈希的新名字，旧缓存自然失效。而没改过的文件继续用原来的哈希名，还能从缓存加载，两全其美。
服务器设置也不能忽略
有时候清了缓存还是有问题，可能是服务器返回的HTTP头控制了缓存行为。比如设置了Cache-Control: max-age=31536000，意思是这个资源一年内都不用重新请求。这种策略对图片特别常见，但也最容易导致更新延迟。
解决办法是调整响应头，对JS、CSS这类可能频繁更新的资源，设短一点的缓存时间，或者配合文件名哈希使用强缓存。而首页HTML本身不要缓存太久，确保用户每次都能拿到最新的入口文件。
用户端临时解决方案
如果你是普通运维人员，临时需要让用户看到最新页面，可以让他们强制刷新：Windows上按Ctrl + F5，Mac上Cmd + Shift + R。这会跳过本地缓存，重新下载所有资源。但这只是应急，不能作为长期方案。
也可以提醒用户清理浏览器缓存，尤其是手机端Safari或微信内置浏览器，缓存机制更封闭，有时连刷新都没用。
别忘了CDN的影响
现在很多网站用CDN加速，静态资源存在离用户近的节点上。这时候就算你服务器更新了文件，CDN节点可能还在吐旧内容。必须主动去CDN平台做缓存刷新，或者设置合理的缓存规则。比如把/js/、/css/路径下的文件设置为较短的TTL，图片类则可以放长些。
有些CDN支持基于文件版本自动失效，配合带哈希的文件名，效果更好。否则你改了代码，用户却在全国各地看着不同版本，排查起来够头疼。