最可靠方式是用document.createElement('link')创建并插入head，需设rel='stylesheet'、校验href唯一性、绑定onload/onerror事件；@import不可用于JS动态加载，FOUC需靠预占位样式+preload+提前请求规避。
直接用 document.createElement('link') 插入 <head> 是最可靠、兼容性最好、也最容易控制的方式。其他方案（比如 @import、document.createStyleSheet）要么受限于使用场景，要么只支持旧版 IE，不建议在现代项目中采用。
怎么用 document.createElement('link') 安全加载 CSS
核心就是创建 link 元素、设好属性、插入 head，并处理加载状态。但容易忽略几个关键点：
-
rel必须设为'stylesheet'，漏写或写错（比如'style'）会导致浏览器忽略该标签 -
href路径要确保可访问，相对路径以当前 HTML 为基准，不是 JS 文件位置 - 没加
onload和onerror就无法知道是否成功，后续依赖样式的逻辑可能出错 - 重复插入相同
href的 link 会触发多次请求，造成冗余和 FOUC 风险
推荐写法：
function loadCSS(href) {
if (document.querySelector(`link[href="${href}"]`)) {
return Promise.resolve();
}
return new Promise((resolve, reject) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = href;
link.onload = () => resolve();
link.onerror = () => reject(new Error(`Failed to load ${href}`));
document.head.appendChild(link);
});
}
为什么不能用 @import 动态加载
@import 只能在 CSS 文件内部或 <style> 标签里生效，JavaScript 中执行字符串 '@import url(...);' 不会触发任何加载行为——它只是普通文本，浏览器不会解析。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- 试图在 JS 里拼接
<style>@import url(...)</style>也不行：CSS 解析器对@import有严格限制，必须出现在样式表最开头，且不能在动态插入的<style>里被识别 - 即使侥幸生效，
@import是同步阻塞的，会拖慢渲染，违背“按需”初衷 - 所有现代构建工具（Webpack/Vite）也都不支持把
@import当作模块依赖来分析和打包
动态加载时怎么避免 FOUC（闪白）
FOUC 发生在样式还没加载完、DOM 已渲染完成的瞬间。单纯插入 link 无法完全规避，但可以大幅降低概率：
- 在触发加载前，先给目标区域加一个最小占位样式（比如
visibility: hidden或opacity: 0），等onload触发后再移除 - 不要等用户点击才开始加载；在路由切换、组件挂载（如 React 的
useEffect、Vue 的mounted）时提前发起请求 - 配合
<link rel="preload" as="style">提前发起请求（注意：preload 不会应用样式，只是预取，仍需后续link插入） - 慎用
media属性做条件加载——如果 media 查询不匹配，浏览器根本不会加载该 CSS，但你无法靠 JS 捕获这个“不加载”事件
Webpack/Vite 环境下别混用两种机制
构建工具里的 CSS 按需加载（比如通过 import('./module.css') + MiniCssExtractPlugin）和原生 DOM 动态加载是两套逻辑，强行混用容易出问题：
- 如果你用了 Webpack 的
css-loader+style-loader，静态import './xxx.css'会被转成 JS 执行插入，而动态import()会生成独立 chunk——这时再手动用document.createElement('link')去加载同一个 CSS 文件，就变成双份请求 - Vite 的
import.meta.glob或import('./xxx.css')返回的是模块对象，不是 URL，不能直接喂给link.href - 真正需要原生动态加载的场景，通常是加载第三方 CSS（比如地图 SDK 主题、编辑器主题包）、或绕过构建流程的运行时配置文件（如用户上传的主题 CSS）
实际项目里，绝大多数组件级样式按需应交给构建工具处理；只有那些路径不确定、内容不可控、或需跨构建环境复用的 CSS，才适合走 DOM 动态注入这条路。
