为何删除外链CSS文件后，页面对应样式仍未发生变化？

核心诱因：静态资源缓存机制 #

你遇到的现象90%以上都是缓存导致的，不同层级的缓存会让浏览器/服务端在原文件删除后仍然返回旧的CSS内容：

• 浏览器本地缓存：浏览器首次加载main.css后会将文件存在本地内存/磁盘中，当你再次刷新页面且资源路径没有变化时，浏览器会直接读取本地缓存的文件，根本不会向服务器发起请求，自然感知不到服务器上的原文件已经被删除。而你修改引用链接后，资源路径发生变化，浏览器没有对应路径的缓存，就会向服务器发起请求，拿不到资源就会出现样式失效，完全符合你观察到的现象。
• 服务端缓存：如果站点部署了CDN、或者Web服务器（Nginx/Apache等）开启了静态资源缓存、或者站点用了后端框架的静态资源缓存机制，会把CSS文件内容缓存在服务端，即使原文件被删除，缓存未过期的情况下服务端仍然会返回缓存的CSS内容。
• 离线缓存机制：如果站点注册了Service Worker（PWA相关能力），会主动缓存静态资源，即使原文件删除，也会从Service Worker的缓存池中返回资源。

• 按Ctrl+F5（Windows）/Cmd+Shift+R（Mac）强制刷新页面，强制跳过本地缓存请求服务器，如果刷新后样式失效，就可以确定是浏览器本地缓存导致的问题。
• 打开浏览器开发者工具（F12）切换到「网络」面板，过滤CSS请求，查看main.css的请求状态：
  • 状态显示200 (from memory cache)/200 (from disk cache)：属于浏览器本地缓存
  • 状态显示正常200且响应体有完整CSS内容：属于服务端返回了缓存内容，也可排查是否删错了对应环境的CSS文件（比如误删本地目录文件，但页面实际请求的是远程服务器的资源）

• 给CSS引用加版本号参数，每次更新CSS时修改版本号即可让浏览器当成新资源请求，不走旧缓存，示例：

  <link rel="stylesheet" href="stylesheets/main.css?v=20240520">
  

• 配置Web服务器/CDN的静态资源缓存规则，设置合理的缓存过期时间，避免过长时间的缓存导致资源更新不及时。
• 若使用了Service Worker等离线缓存能力，更新资源时同步更新缓存规则。

内容的提问来源于stack exchange，提问作者Spring