真正的关键在：想让蘑菇影视官网更干净？缓存这项设置一定要改（一条讲透）

2026-05-15 12:55:02 糖心在线热看 糖心vlog

51|0条评论

开门见山：想让网站看上去“干净”、内容及时更新且不让旧资源乱窜，真正的关键不是清空浏览器历史，而是把缓存策略分层管理好——HTML 页面要短缓存并允许立即校验，静态资源（图片、JS、CSS）要长期缓存并通过文件名/哈希做版本控制。把这“一条”做对，其它脏乱和更新不同步的问题会自动消失。

为什么只改这一项就能大幅改善体验

旧页面内容或错误脚本残留，通常是浏览器或 CDN 缓存了过期的 HTML/静态文件。
如果你对所有资源都设置同样的长缓存，用户就会一直看到旧版本。 -把“可变的页面短缓存、不可变的静态资源长缓存+版本化”作为默认策略，既保证用户看到最新内容，又能大幅提升加载速度和节省流量。

一条讲透：具体策略是什么？

HTML（或任何会频繁变动的页面）：Cache-Control: no-cache, must-revalidate, max-age=0
含义：浏览器会在每次请求时向服务器校验是否有更新，确保页面最新。
静态资源（图片、CSS、JS、字体等，不会频繁改动的资源）：Cache-Control: public, max-age=31536000, immutable
配合版本化文件名（如 app.abc123.js、style.v2.css）或哈希命名，只有文件名变化时才更新。这样可以把缓存时间设为一年，获得最佳性能。
对于临时文件或敏感数据可以使用 Cache-Control: no-store。用一句话概括：页面短缓存 + 静态长缓存并强制版本控制。

如何在常见环境中实现（实用示例）

Apache（.htaccess）

  <IfModule mod_expires.c>
    ExpiresActive On
    # 静态资源长期缓存
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType image/* "access plus 1 year"
  </IfModule>

  <FilesMatch "\.(html|php)$">
    Header set Cache-Control "no-cache, must-revalidate, max-age=0"
  </FilesMatch>

Nginx

  location ~* \.(?:css|js|jpg|jpeg|gif|png|webp|woff2|woff|ttf)$ {
    add_header Cache-Control "public, max-age=31536000, immutable";
  }

  location ~* \.(?:html|php)$ {
    add_header Cache-Control "no-cache, must-revalidate, max-age=0";
  }

Cloudflare（或其他 CDN）
在控制面板设置静态文件规则：Edge Cache TTL = a year；Browser Cache TTL = a year。
对首页/HTML 设置 Edge Cache TTL = Respect Existing Headers 或短时间（0-30 秒），并在 Page Rules 中对 HTML 强制 no-cache。
AWS S3 + CloudFront
S3 对象设置 Metadata: Cache-Control: public, max-age=31536000；并在部署时把文件名带哈希。
CloudFront 对 HTML 路由设置较短的 TTL，或开启“Forward headers to origin”以便即时校验。
Netlify / Vercel
在构建时使用带 hash 的输出文件（默认都支持），并在 netlify.toml / vercel.json 配置 headers 指定 cache-control 规则。
Google Sites（如果你的网站真正托管在 Google 网站）
Google Sites 无法自定义服务器端 Cache-Control 响应头。换句话说，你不能直接在 Sites 上设置这些头。
解决办法：把关键静态资源（logo、封面图、外部脚本）放到可自定义头的 CDN/S3/静态托管服务，并给资源加版本号；或者将站点迁移到支持自定义缓存控制的托管平台。
简单临时策略：每次更新明显资源时更改资源 URL（在 Sites 编辑器中替换图片/脚本地址，附带 ?v=20260219 参数），强制清晰版本感。