样式改完传上去,打开页面还是老样子,按钮颜色没变,图片还是旧的。第一反应是怀疑没传上去,其实多半是浏览器把旧文件从缓存里拿出来了。

普通刷新和强制刷新的区别

F5 或者 Ctrl 加 R 是普通刷新,页面框架重新请求,但缓存里的 css、js、图片还会被复用,只要服务端没给新的缓存标识,拿到的还是老文件。Ctrl 加 F5 是强制刷新,跳过缓存,把这些资源重新下载一遍,样式问题通常一下就正常了。

Mac 上是 Command 加 R,强制刷新用 Command 加 Shift 加 R。笔记本键盘上有些 F 键默认被设成音量、亮度,按 F5 没反应就先按住 Fn。

开发者工具里的那一项更彻底

按 F12 打开开发者工具,在刷新按钮上点右键,会多出清空缓存并硬性重新加载这一项。它比快捷键更明确,顺手还能看到网络面板里每个文件的加载时间和状态码,能直接看出是不是 304 走了缓存。

刷新了还是老的,往上一层查

强刷之后仍是旧内容,就不是浏览器的事了。看看是不是套了 CDN,节点缓存没刷新;或者用了缓存插件、服务端开了页面缓存。这时候要在 CDN 后台提交刷新,或者在链接后面加一个变化的参数验证一下,能变就说明源站是新的,缓存层没跟上。

手机上没有快捷键,下拉刷新;Safari 点地址栏旁边那个转圈图标。手机端的缓存更顽固,实在不行换一个浏览器或者清一下站点数据。

顺手说两个容易混淆的

Ctrl 加 F5 是刷新,Shift 加 F5 在多数浏览器里也是刷新,但在某些环境被定义成别的功能,别硬记。关闭当前标签页是 Ctrl 加 W,和刷新只差一个键,手快容易按错,标签开得多的时候一下就没了。

日常遇到页面不对,先按一次 Ctrl 加 F5。九成的问题在这一步就解决了,剩下的再去查缓存层和服务端。