动态创建link加载CSS可靠但需谨慎：必须设rel="stylesheet"、插入head、监听onerror，onload仅表下载完成而非样式生效，应通过getComputedStyle或requestAnimationFrame检测实际应用。
动态创建link标签加载CSS是否可靠
可靠，但不是“扔进去就完事”。浏览器会异步下载并应用样式，但不保证执行顺序，也不阻塞渲染——这既是优点也是坑源。
常见错误现象：页面闪动（FOUC）、组件初始渲染无样式、同名CSS类被后加载的覆盖。
- 必须显式设置
rel="stylesheet"，否则浏览器不识别为样式表 - 推荐在
head中插入，避免部分浏览器（如旧版Safari）对body内link的延迟解析 - 不要依赖
link.onload做样式就绪判断——它只表示下载完成，不表示已计算并应用到DOM
如何判断CSS是否真正生效并可用
不能靠onload，得看样式是否影响了实际元素。最轻量的办法是查getComputedStyle或触发一次强制重排。
使用场景：需要等某套主题CSS加载完再渲染对应UI，比如暗色模式切换后初始化组件。
立即学习“Java免费学习笔记（深入）”；
- 简单检测：插入
link后，读取一个该CSS里定义的class元素的computedStyleMap()或getComputedStyle(el).color - 更稳妥的做法是加个
setTimeout(..., 0)或requestAnimationFrame，让样式有机会注入并计算 - 注意：若CSS含
@import或字体@font-face，实际就绪时间更长，无法靠JS精确捕获
link加载失败时怎么处理
失败很常见——路径错、CORS、网络中断、CDN挂了。默认静默失败，必须主动监听。
错误信息：link.onerror会触发，但不会告诉你具体原因；控制台可能显示Failed to load resource: net::ERR_CONNECTION_REFUSED这类。
- 务必绑定
link.onerror，并在里面移除该link节点，避免残留无效引用 - 别用
try/catch包link.href = xxx——赋值本身不抛错 - 可配合
fetch(url, { method: 'HEAD' }).then(...)预检，但要注意CORS限制和额外请求开销
Vue/React里动态加载CSS要不要用useEffect或onMounted
要，但仅用来触发加载逻辑，不是“等它加载完再渲染”。生命周期钩子只是确保DOM环境就绪，不是样式加载守门员。
性能影响：多次重复插入同一href的link，浏览器会复用缓存，但节点仍会新增——需手动去重。
- 每次加载前先查
document.querySelector('link[href="xxx.css"]')，存在就跳过 - React中避免在
useEffect里无条件创建，否则组件重渲染会反复插入 - Vue组合式API中，建议把加载逻辑封装成
useCssLoader，内部维护loadedUrlsSet
link插入后没有“就绪事件”，别信onload；二是样式生效时机和JS执行不在一个队列里，强行同步只会让你更困惑。 
