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链接才不出错
直接替换原始路径即可,但要注意顺序和依赖关系:
立即学习“前端免费学习笔记(深入)”;
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- JS 类库必须按依赖顺序引入:先
vue,再vue-router,再vuex,否则控制台报Vue is not defined - CSS 的
link标签建议放在<head>顶部,避免 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域名,实际链路也没提速。


















