HTML本身不能CDN加速，需将script/link/img等外部资源替换为CDN域名URL；通过浏览器Network面板检查Request URL是否为CDN地址及响应头x-cache等字段验证是否命中CDN。
HTML 本身不创建 CDN 配置，它只是消费 CDN 资源的终端；真正起作用的是你在 <link>、<script>、<img> 标签中填入的 CDN 域名和路径。
怎么把本地静态资源换成 CDN 地址
核心动作就是替换 HTML 中资源的 src 或 href 属性值，指向公开或私有 CDN 的 URL。不是改 HTML 结构，而是改链接内容。
- JS 文件：
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js"></script>（注意版本号要匹配你项目实际依赖） - CSS 文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> - 图片：
<img src="https://your-bucket.fra1.cdn.digitaloceanspaces.com/logo.png" alt="logo">（需确保该 CDN 域名已配置 CORS 和 public 权限） - 不要写相对路径如
./css/main.css，也不要用http://localhost:8080这类开发地址
为什么有些 CDN 链接加载失败或报 CORS 错误
常见原因是目标 CDN 服务未开启跨域支持，或你的资源被浏览器策略拦截。不是 HTML 写错了，而是服务端响应头缺失 Access-Control-Allow-Origin。
- CDN 提供商如 jsDelivr、cdnjs 默认允许跨域，可直接用；但自建 CDN（如 Nginx 反向代理、OSS + CDN 组合）必须手动配置响应头
- 若用
<img>加载 CDN 图片并调用canvas.toDataURL()，CORS 缺失会导致 “Tainted canvas” 报错 - 解决办法：在 CDN 源站（如 OSS bucket、S3 bucket）设置 CORS 规则，允许
*或指定域名；或加crossorigin="anonymous"属性（仅对 script/link/img 有效）
如何验证 CDN 是否生效且没回源
靠浏览器开发者工具的 Network 面板看请求来源和响应头，不是靠“页面变快了”这种主观判断。
立即学习“前端免费学习笔记（深入）”；
- 检查
Response Headers中是否有x-cache: HIT（Cloudflare）、x-cdn-cache: HIT（阿里云）、x-amz-cf-pop（CloudFront）等字段 - 对比资源的
Size列：显示 “from memory cache” 或 “from disk cache” 是客户端缓存，不是 CDN；显示真实字节数 + 远程 IP 才是 CDN 节点返回 - 禁用浏览器缓存（勾选 DevTools → Network → Disable cache），再刷新，排除本地缓存干扰
- 用
curl -I https://your-cdn.com/app.js查看via、x-cache等头部，确认是否命中边缘节点
最常被忽略的一点：CDN 域名必须带协议（https://），混用 http:// 在现代浏览器会被主动拦截；另外，HTML 中引用的 CDN 资源一旦上线，就无法靠改 HTML 立即失效——缓存时间由 Cache-Control 头决定，不是你删掉那行代码就能立刻更新的。
