最直接、兼容性最好的方式是动态创建link标签并插入head，核心三步：创建元素→设置rel="stylesheet"和href→appendChild到document.head；需查重避免重复加载，监听onload确保样式就绪后再操作DOM。
link 元素插入 head 是最直接、兼容性最好的方式，不需要框架或构建工具也能立刻生效。
怎么创建并插入 link 标签
核心就是三步：创建元素 → 设置属性 → 插入 DOM。浏览器遇到带 rel="stylesheet" 的 link 会自动发起请求并应用样式。
-
link.rel必须设为"stylesheet"，否则不会触发 CSS 加载 -
link.href要是完整路径或相对路径，注意路径错误时静默失败（onerror才能捕获） - 必须用
document.head.appendChild(link)，插到body里无效 - 不要手动设置
link.type = "text/css"—— 现代浏览器已忽略该属性，设了反而可能干扰解析
为什么加载后样式没立刻生效（FOUC）
常见于样式依赖的 DOM 已渲染但 CSS 还没就绪，尤其在快速插入后立即操作元素时。根本原因不是“加载慢”，而是没等加载完成就执行后续逻辑。
- 务必监听
link.onload，而不是靠setTimeout或 DOM 渲染时机猜测 -
link.onerror一定要处理，404 或跨域问题下样式完全不生效，但控制台可能无提示 - 避免在
link插入后立刻读取getComputedStyle或操作依赖该样式的元素 - 如果组件需要“样式就绪才显示”，建议在
onload回调里 toggle class 或修改style.display
如何防止重复加载同一份 CSS
用户反复触发同一操作（比如多次打开弹窗）时，link 标签会被重复创建，导致冗余请求甚至样式冲突。
立即学习“Java免费学习笔记（深入）”；
- 插入前先查重：
document.querySelector(`link[href="${url}"]`)，存在就直接 resolve Promise - 注意 URL 中的查询参数会影响匹配，例如
style.css?v=1和style.css?v=2被视为不同资源 - 不要只靠
id或data-*属性去重 ——link标签本身没有强制要求设这些属性，容易漏判 - 如果项目用了 HTTP 缓存，重复插入相同
href实际不会发新请求，但 DOM 节点仍会多一个，长期积累影响维护
Webpack 环境下别让 MiniCssExtractPlugin 破坏按需逻辑
开发时用 style-loader 没问题，但生产环境启用 MiniCssExtractPlugin 后，CSS 会被提前提取成独立文件，失去“随 JS chunk 动态加载”的能力。
- 确认
splitChunks.chunks设为"async"，否则它会把所有 CSS（包括入口里静态 import 的）全抽进main.css - 检查打包产物：按需加载的 CSS 应该和对应 JS chunk 同名（如
Button.abc123.css），且不在main.css里 - 如果用了
import('./component.js')但样式仍出现在主包里，大概率是component.js内部静态import './style.css'被 Webpack 提前分析进了依赖图 - 真正按需的写法是：动态
import()只负责加载 JS，CSS 必须由该 JS 内部通过link注入 —— 这样才能绕过构建时的 CSS 提取逻辑
最易被忽略的一点：动态加载的 CSS 不会参与 CSSOM 构建的“初始样式计算”，所以它对首屏渲染零影响；但一旦插入，就会触发样式重新计算和布局重排 —— 如果加载时机在用户交互中，这个重排几乎不可见；但如果在滚动或动画过程中插入，可能造成卡顿。
