动态创建<link>加载CSS可靠但需在<head>插入，onload仅表示下载完成而非样式生效；应轮询getComputedStyle验证目标属性，或结合rel="preload"（需as="style"）优化。
动态创建 <link> 标签加载 CSS 是否可靠
可靠，但有前提：必须在 <head> 中插入，且不能依赖 onload 保证样式已生效。浏览器对 <link rel="stylesheet"> 的加载和应用是异步的，但渲染会阻塞直到该 CSS 被解析完成（即“render-blocking”行为依然存在），只是不阻塞 HTML 解析。
link.onload 和 link.onerror 的实际触发时机
这两个事件只表示资源**下载完成**（HTTP 状态 200），不代表 CSS 已被解析、规则已注入 document.styleSheets，更不代表元素已重绘。尤其在低性能设备或高并发加载时，onload 触发后立即操作 DOM 样式可能仍无效。
-
onload在 CSS 文件下载完毕后触发，但此时浏览器可能尚未开始解析或构建 CSSOM -
onerror仅在 HTTP 请求失败（如 404、网络中断）时触发；CSS 语法错误、@import 失败等不会触发它 - 若需确认样式已就绪，应结合
document.styleSheets检查或使用getComputedStyle验证目标属性
如何安全地等待动态 CSS 生效
没有标准 API 可监听“CSS 解析完成”，但可通过轮询 + 回退策略逼近效果。关键不是等事件，而是等结果。
function loadCSS(url, callback) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
link.onload = () => {
// 启动验证循环
const check = () => {
const computed = getComputedStyle(document.body);
if (computed && computed.backgroundColor) {
callback?.();
} else {
requestAnimationFrame(check);
}
};
requestAnimationFrame(check);
};
link.onerror = () => callback?.(new Error(`Failed to load ${url}`));
document.head.appendChild(link);
}
- 避免用
setTimeout硬等，优先用requestAnimationFrame对齐渲染周期 - 验证目标样式时，选一个明确由该 CSS 设置的、非继承的属性（如
background-color、font-family） - 若 CSS 中含
@import或字体@font-face，需额外处理，它们不触发父<link>的onload
与 rel="preload" 搭配使用的注意事项
如果想提前发起请求但延迟应用，可用 rel="preload" + 动态切换 rel，但必须手动设置 as="style"，否则浏览器不会复用预加载资源。
立即学习“前端免费学习笔记（深入）”；
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = '/async.css';
link.onload = () => {
link.rel = 'stylesheet'; // 此时才真正应用
};
document.head.appendChild(link);
- 仅 Chrome / Edge 103+、Firefox 116+ 支持
rel="preload"预加载 CSS 后切换为stylesheet - Safari 目前不支持该切换行为，会重新发起请求
- 未加
as="style"会导致预加载失效，浏览器按as="fetch"处理，无法复用
onload 就执行后续逻辑，结果样式未生效，DOM 操作白忙一场。 
