您在网站上修改了一段文字、更换了一张图片或更新了颜色；但当您在浏览器中打开页面时，看到的却仍是旧样子。修改确实已经完成，服务器上的文件也是新的，可屏幕上却看不出来。其原因几乎总是 cache（缓存）层。缓存是为了让页面更快打开而保存的一份内容副本；问题在于，当您完成更新时，这份副本会变得陈旧。下面我们逐层剖析”我改了但显示的还是旧的”这个问题。
缓存并不是一件坏事；相反，它是让网站快速打开的基本途径之一。如果每位访客每次打开页面时所有文件都要从头生成并重新下载，那么既会增加服务器负载，页面也会变慢。因此，内容的副本会保存在多个节点上。问题出在：当您做出更新时，这些副本不会自动刷新。所以真正要做的并不是彻底关闭缓存，而是在您完成更新时，确保相应的副本得到刷新。
缓存层：问题积压在哪里？
一个网页在到达访客之前要经过若干节点，而每个节点都可能保存一份内容副本。如果修改明明已经完成却仍然显示旧内容，那么副本一定是卡在了其中某一层。
- 浏览器缓存（browser cache）：保存在访客的电脑上。浏览器为了避免重复下载之前已下载过的 CSS、JavaScript 和图片，会将它们保存在磁盘中。
- 服务器缓存：在主机端保存着页面已生成好的一份副本；这样每次请求时页面就不必重新生成。
- CDN 缓存：内容分发网络（CDN）会将文件复制到全球各地的服务器上。系统会向访客提供距离最近的副本；当这份副本未被更新时，返回的就是旧文件。
- WordPress cache 插件：在 WordPress 中，缓存插件会生成页面的静态 HTML 副本。即使内容发生变化，插件仍可能继续提供旧副本。
CSS 和 JavaScript 文件的特殊情况
最容易让人误判的一层是 CSS 和 JavaScript 文件的缓存。浏览器一旦下载过这些文件的名称，就会把同名文件视为未曾改动，并且不再向服务器询问。即使您修改了文件的内容，由于文件名保持不变，浏览器仍会使用磁盘上的旧版本。结果就是：您的设计修改在代码里确实存在，但屏幕上看不到。
同样的情况也适用于 CSS 中通过 url() 引用的图片。如果您用相同的文件名重新上传一张背景图片，浏览器会继续显示旧图片，因为地址没有改变。这在诸如 hero 区块这样的大型背景图片上尤其具有迷惑性：您更新了图片，服务器上放着新文件，但访客仍然继续看到被裁切或过时的图片。
这种行为其实是一种有意为之的速度优化。浏览器假定同一地址的文件没有改变，因而不再重新下载；网站也因此打开得更快。问题仅仅出在内容已经改变而地址却保持不变。因此解决办法不是禁用缓存，而是在文件每次改变时，能够向浏览器传达”这已经是一个不同的文件”这一信息。
根本解决方法：版本参数（版本化）
每次修改都手动清除缓存是不可持续的；真正的解决办法是在文件地址上添加一个版本参数。文件每次改变时，这个参数会自动改变，浏览器便会将其视为一个新文件并重新下载。
- 固定版本不够用：像 style.css?ver=1.0 这样的固定版本，即使文件改动多次，由于编号不变，浏览器仍会继续提供旧文件。
- filemtime 方法：在版本号中加入文件的最后修改时间（style.css?ver=1.0.1787157120）。文件每次改变时，这个值都会自行改变；浏览器就会下载新版本，无需人工干预。
- CSS 内的图片：对于无法直接版本化的 url() 图片，把图片地址转移到一个变量中，并在该变量上同样加入这个时间戳；这样图片也会在每次更新时得到刷新。
如何清除各个层的缓存？
如果修改没有显示出来，按照分层顺序逐一处理会最快见效：
- 浏览器：执行强制刷新（Windows 上按 Ctrl+F5，Mac 上按 Cmd+Shift+R）。这会让浏览器跳过缓存，重新从服务器获取文件。换一台设备或使用无痕标签页进行核对也很有帮助。
- 插件/服务器：运行 WordPress 缓存插件（以及服务器缓存，如果有的话）的”清除缓存”功能。
- CDN：如果您使用 CDN，请对相关文件执行缓存清空（purge）；否则 CDN 会继续提供旧副本。
- 长效措施：为避免这些步骤反复出现，请以版本参数的方式提供文件。
有一点值得注意：作为开发者，在您屏幕上显示为最新的页面，在您访客的屏幕上可能仍是旧的。因为您经常执行强制刷新，而访客的浏览器里却留着旧副本。所以，要确保一项修改对所有人都可见，就需要不仅在您自己的浏览器中，还要在服务器和 CDN 层刷新缓存。作为根本解决方法的版本化，恰好消除了这一差异：文件一改变，地址就随之改变，所有人都会自动获取新版本。
总而言之，”我改了但显示的还是旧的”这一问题并不是错误，而是缓存的自然结果。在一个搭建得当的网站上，CSS 和 JavaScript 文件会自动版本化；当您做出一项修改时，访客最迟在下一次访问时就会看到最新的样子。将手动清理需求降到最低的结构，既节省您的时间，也节省您访客的时间。
相关服务：网页设计与软件、软件与 PC 应用、系统集成
Leave a Reply