能监听，但只对link外链CSS有效；@import嵌套、内联样式、跨域样式表无法被onload/onerror捕获，事件须在插入head前绑定，并建议加5秒超时兜底。
能监听，但只对 link 标签外链的 CSS 有效；@import 嵌套加载、内联样式、跨域样式表都无法被原生事件捕获。
用 onload 和 onerror 监听外链 CSS 加载结果
这是最直接、兼容性最好的方式，适用于通过 document.createElement('link') 动态插入的样式表。
-
onload在 HTTP 状态码为 200 且 CSS 内容解析完成时触发（注意：不保证样式已应用到 DOM） -
onerror在请求失败（404/403/网络中断等）或 MIME 类型错误（如返回 HTML 而非text/css）时触发 - 必须在插入
document.head之前绑定事件，否则部分浏览器（如旧版 Safari）会漏掉事件 - 建议加超时兜底，因为某些场景（如服务器返回 200 但空内容）不会触发
onload或onerror
示例：
function loadCSS(url) {
return new Promise((resolve, reject) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
const timeoutId = setTimeout(() => reject(new Error('CSS load timeout')), 5000);
link.onload = () => {
clearTimeout(timeoutId);
resolve();
};
link.onerror = () => {
clearTimeout(timeoutId);
reject(new Error(`CSS load failed: ${url}`));
};
document.head.appendChild(link);
});
}
为什么不能靠 document.styleSheets 判断是否加载完成
这个 API 返回的是当前页面所有样式表列表，但它存在几个关键缺陷：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- 跨域样式表会出现在
document.styleSheets中，但读取其cssRules会抛出SecurityError，无法判断是否真正加载成功 - 即使样式表已加载，
cssRules可能为空（例如 CSS 语法错误、空文件），此时轮询会误判为“未加载” - 样式表插入后立即检查
document.styleSheets.length增加，并不能说明内容已就绪——它只是 DOM 节点存在了 - IE 低版本中
sheet属性可能延迟挂载，需配合attachEvent('onload')，但该行为已被现代标准废弃
遇到 @import 该怎么办
原生 onload 对 @import 完全无感知：主 CSS 加载成功，里面 @import 的资源失败也不会触发任何事件。
- 服务端尽量避免深度
@import，构建时用工具（如 PostCSS、Webpack）提前合并 - 若必须动态处理，得用
fetch()先拉取主 CSS 内容，正则或 AST 解析出所有@importURL，再逐个发起请求并监听 - 开发期可借助
performance.getEntriesByType('resource')查看实际发出的 CSS 请求，但无法区分哪些是@import触发的
真正难的不是监听事件，而是意识到：你监听到的只是“HTTP 层面的加载完成”，不是“样式已渲染生效”。如果后续逻辑依赖样式计算（比如 getBoundingClientRect() 或伪元素内容），仍需额外等待一次 requestAnimationFrame 或使用 MutationObserver 观察目标元素 computed style 变化。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
