cdn引入css必须配integrity和crossorigin="anonymous"才真正可用，否则浏览器可能拒绝执行或跳过校验；正确写法为，且需启用brotli压缩、置于顶部。
CDN 引入的 CSS 必须带 integrity 才算真正可用
不加 integrity 的 CDN 链接，浏览器会当作“不可信资源”拒绝执行（尤其在 strict-dynamic CSP 策略下），或因跨域缓存失效导致重复下载。生产环境一旦上线，必须确保每个 <link> 都含完整哈希值。
正确写法示例：<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-..." crossorigin="anonymous">
-
integrity值需从 CDN 提供方页面复制，或用curl -s https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css | openssl dgst -sha384 -binary | openssl base64 -A本地生成 -
crossorigin="anonymous"不可省略，否则浏览器不会发送 CORS 请求，integrity校验直接跳过 - 若用自建 CDN（如百度云、阿里云），需手动上传文件后计算哈希并注入 HTML 模板，不能依赖构建时自动补全
压缩效果取决于服务器是否启用 Brotli，不是靠 .min.css 文件名
光把 bootstrap.css 换成 bootstrap.min.css 只是删除空格和注释，体积只减 15–20%；真正压到 22–25KB 是靠 Brotli 编码——但前提是 CDN 节点或源站明确启用了它。
- 检查方式：打开 Chrome DevTools → Network → 找到该 CSS 请求 → 查看 Response Headers 中是否有
content-encoding: br - jsDelivr、cdnjs 默认开启 Brotli；UNPKG 和部分国内 CDN（如 staticfile.org）仍只支持 gzip
- 若你用自建 CDN，百度云/阿里云控制台需在「缓存配置」中勾选「Brotli 压缩」并设置生效路径为
*.css
样式加载顺序错位会导致 FOUC 或重绘延迟
CDN CSS 放在 底部、或被 JS 动态插入，都会让浏览器先渲染无样式的 HTML，等 CSS 下载完再重绘——这就是 FOUC（Flash of Unstyled Content）。生产环境首屏性能指标（如 CLS）会因此恶化。
- 必须把 CDN
<link>放在最顶部，早于任何自定义 CSS、JS 或 meta 标签 - 禁止用 JS 动态创建
link并 append 到 head（如document.head.appendChild(link)），这等于放弃预加载能力 - 若使用 SSR（如 Next.js/Nuxt），CDN 链接必须在服务端模板中硬编码，不能靠客户端环境判断拼接 URL
CDN 地址不能靠 window.location.hostname 运行时切换
开发时想本地跑、生产走 CDN？千万别在 JS 里写 if (location.hostname === 'prod.com') {...} 然后 document.write link——SSR 渲染会出错，且构建产物不可复现，CI/CD 部署后可能突然白屏。
- 正确做法是构建时注入：Webpack 用
HtmlWebpackPlugin.templateParameters，Vite 用vite-plugin-html或html.inject插件，在 index.html 模板里写<!--{injected-css}-->，构建时替换成对应链接 - 环境变量必须通过
process.env.NODE_ENV或import.meta.env.PROD在构建阶段读取，运行时变量一律无效 - 本地开发若需禁用 CDN，应配代理（如 Vite 的
server.proxy）把 /css/ 请求转到本地静态目录，而不是删掉 link 标签
integrity 漏了、Brotli 没开、或者构建时没切环境——这些点不验证一遍，压测时 CSS 加载慢、CSP 报错、首屏抖动，全都得返工。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
