CDN边缘节点不支持运行JavaScript，因其本质是缓存代理而非执行环境，无JS引擎和DOM；“页面片段组合”必须在服务端（SSR）、边缘侧（ESI）或构建时完成，CDN仅负责分发。
CDN边缘节点不支持运行JavaScript，别指望用document.write或fetch动态拼HTML
CDN边缘节点本质是缓存代理，不是执行环境。你写的 document.write、fetch()、innerHTML += 在浏览器里能跑，但在 CDN 节点上根本没 JS 引擎——它连 DOM 树都没有。所谓“页面片段组合”，必须在服务端或构建时完成，CDN 只负责原样分发。
常见翻车点：
- 误以为 CDN 支持 Edge Function（比如 Cloudflare Workers）就能直接操作 HTML 片段——那已是额外付费能力，且需手动开启，不属于默认 CDN 缓存行为
- 在 HTML 里写
<script>fetch('/fragment.html').then(...)</script>，结果首屏白屏、SEO 失效、TTFB 不变，只是把延迟从服务端搬到了客户端 - 用 Nginx 的
sub_filter动态替换内容，却忘了它不支持异步、不能读取请求头做个性化，且与gzip/brotli压缩冲突
真正可行的“片段组合”只有三种路径：SSR、ESI、构建时静态注入
想让不同用户看到不同 HTML 片段（如登录态 header、AB 测试 banner），又希望 CDN 高速分发，只能把组合逻辑提前到可缓存的环节：
-
SSR（服务端渲染）：Node.js / PHP / Go 等后端在响应前拼好完整 HTML，再吐给 CDN。关键点是：对每个逻辑分支（如
isLogin=true）生成独立 URL 或带 Vary 头，否则 CDN 会把 A 用户的登录页缓存后返回给 B 用户 -
ESI（Edge Side Includes）：少数 CDN（如 Akamai、Fastly）支持，用
<esi:include src="/header?uid=123"></esi:include>标记，由边缘节点发起子请求并组装。但主流 CDN（Cloudflare、阿里云、腾讯云）默认不开启，且需源站配合返回Vary: Cookie等头防缓存污染 -
构建时静态注入：Vite/webpack 构建阶段根据环境变量或配置生成多份 HTML（如
index.logged-in.html、index.ab-test-b.html），CDN 按路径缓存。适合变化少、分支明确的场景，无需运行时开销
动态注入 JS/CSS 的安全边界：只允许加载哈希文件，禁止内联脚本
很多团队想“动态注入第三方统计代码”或“按地域加载不同地图 SDK”，但直接往 HTML 里塞 <script src="https://xxx.com/analytics.js"></script> 会破坏缓存一致性——CDN 缓存的是带该 script 的 HTML，一旦三方脚本更新或下线，你的页面就挂了。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法：
- 所有外部资源必须走
integrity+crossorigin，例如：<script src="/js/analytics.a1b2c3.js" integrity="sha384-..." crossorigin></script> - 动态逻辑收口到一个极小的入口脚本（如
loader.js），由它根据window.location.hostname或navigator.language决定加载哪个真实 bundle；这个loader.js必须带 contenthash，且 CDN 缓存时间设为max-age=31536000 - 绝对不要在 HTML 中用
document.write或eval注入脚本字符串——这既绕过 CSP，又让 Lighthouse 直接判为高危
HTML 文件本身不能被 CDN 长期缓存，哪怕你用了片段组合
无论你用 SSR 拼了多少个版本，index.html 仍是动态入口。CDN 上设 Cache-Control: public, max-age=3600 是危险操作——用户改完文案、上线新包，CDN 还在返回一小时前的 HTML，按钮失效、JS 路径 404、甚至整个页面错乱。
正确姿势只有一条：
- 对所有 HTML 路径（如
/、/about）强制设置Cache-Control: no-cache或max-age=0, must-revalidate，让 CDN 每次都向源站发条件请求（带If-None-Match） - 源站必须返回正确的
ETag或Last-Modified，否则 CDN 无法判断是否命中协商缓存，就会变成全量回源 - 如果用了 ESI 或 SSR，源站还需返回
Vary: Cookie, User-Agent等头，否则 CDN 会把不同用户的响应混在一起缓存
最容易被忽略的一点：CDN 控制台里“HTML 缓存时间”那个滑块，调成 1 小时 ≠ 实际生效——它只覆盖没有显式 Cache-Control 头的响应。只要源站写了头，CDN 就必须遵从。别信控制台 UI，抓包看 response headers 才算数。
