cdn加速不作用于html文件本身，只对它引用的外部资源生效；确认资源是否走cdn需打开浏览器开发者工具（f12），切换network面板，刷新页面后检查script或link请求的request url域名是否为cdn地址，如https://cdn.example.com/xxx.js，否则未生效。
CDN加速不作用于HTML文件本身，只对它引用的外部资源生效；把HTML扔到CDN上但JS/CSS仍从源站加载，首屏速度几乎没变化。
怎么确认某个资源真走CDN了
打开浏览器开发者工具（F12），切到 Network 面板，刷新页面，点开任意一个 script 或 link 请求，看它的 Request URL 域名是不是类似 https://cdn.example.com/xxx.js 或 https://xxx.maxcdn.com/xxx.css。如果不是，说明没走CDN。
常见误判：
- 只把
index.html托管到 GitHub Pages + Cloudflare，但src="js/app.js"仍是https://yourdomain.com/js/app.js - 用了
<link rel="preload">却指向源站路径，预加载也白搭
HTML里怎么写CDN链接才不出错
直接替换原始路径即可，但要注意顺序和依赖关系：
- JS 类库必须按依赖顺序引入：先
vue，再vue-router，再vuex，否则控制台报Vue is not defined - CSS 的
link标签建议放在顶部，避免 FOUC（闪白） - 字体文件用
<link rel="preload" as="font" crossorigin>，漏掉crossorigin会导致字体加载失败 - 避免在
src或href中混用协议相对路径（如//cdn.example.com/xxx.js），现代浏览器虽支持，但部分企业内网或 Strict CSP 策略下会拦截
CDN链接要不要加 integrity 和 crossorigin
加，尤其对公共 CDN（如 unpkg、jsDelivr、BootCDN）：
-
integrity防篡改：<script src="https://unpkg.com/vue@3/dist/vue.global.js" integrity="sha384-..."></script>，值可从 CDN 页面或 npm 包的subresource-integrity工具生成 -
crossorigin必须配字体、JSON、某些 JS（如带fetch的库），否则控制台报 CORS 错误且无法读取加载状态 - 不加
crossorigin时，fetch()或XMLHttpRequest拿不到响应头，影响错误监控和性能打点
为什么加了CDN，Network里还是显示“from disk cache”或“from memory cache”
这是正常现象，不代表CDN失效——缓存优先级高于网络请求。关键看首次加载（无缓存）时的域名是否为CDN地址。
验证方法：
- 隐身窗口打开，或禁用缓存（Network 面板勾选 “Disable cache”）
- 清空浏览器缓存后硬刷（Ctrl+Shift+R）
- 检查响应头里的
X-Cache（Cloudflare）或X-Cache-Hits（腾讯云CDN）字段
真正容易被忽略的是：CDN配置未开启缓存规则，或源站返回了 Cache-Control: no-cache，导致CDN节点不缓存，每次回源——这时候即使URL是CDN域名，实际链路也没提速。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
