link元素的onload/onerror事件在Chrome 93+/Firefox 65+支持但Safari（iOS 17/macOS 14）仍不触发；需优先监听原生事件，失败时降级轮询document.styleSheets并安全检查cssRules。
link元素的onload和onerror事件在Chrome/Firefox中可用，但Safari不支持
Chrome 93+、Firefox 65+ 支持 link 元素的 onload 和 onerror 事件，但 Safari（截至 iOS 17 / macOS 14）仍不触发它们——这是最常踩的坑。别信“现代浏览器都支持”的说法，真上线前必须验证 Safari 行为。
实际做法是：优先监听原生事件，失败时降级用定时轮询 document.styleSheets 列表 + 检查 sheet.cssRules 是否可读：
-
onload触发表示样式表已下载并解析完成（不含 @import 嵌套加载） -
onerror在 404、CORS 拒绝、MIME 类型错误（如返回 text/html）时触发 - 轮询间隔建议 ≥ 50ms，避免频繁访问
cssRules引发重排或跨域异常
动态插入link时，onload/onerror必须在insertBefore之前绑定
事件监听器必须在 link 元素被插入 DOM 前挂载，否则 Chrome/Firefox 会直接跳过事件触发（尤其在缓存命中时）。这不是竞态问题，是规范行为。
错误写法：document.head.appendChild(link); link.onload = handler;
立即学习“前端免费学习笔记（深入）”；
正确顺序：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/theme.css';
link.onload = () => console.log('loaded');
link.onerror = () => console.error('failed');
document.head.insertBefore(link, document.head.firstChild);
监听@import嵌套样式表的加载状态不可靠
原生 onload 只反映外链 CSS 文件本身的加载结果，对其中 @import 的资源完全无感知。即使主样式表加载成功，@import 失败也不会触发 onerror，且 sheet.cssRules 可能为空或抛出 SecurityError（跨域时）。
- 若必须监控嵌套资源，改用
fetch()预加载主文件，手动解析并提取@importURL 再逐个请求 - 服务端尽量避免深度
@import，改用构建工具合并 - 开发期可用
performance.getEntriesByType('resource')查看所有 CSS 请求，但无法区分是否由 @import 发起
使用document.styleSheets判断加载完成要小心跨域和规则访问限制
当降级轮询时，不能只看 document.styleSheets.length 是否增加——跨域样式表会出现在列表里，但读取其 cssRules 会抛出 DOMException: Failed to read the 'cssRules' property。这会导致轮询中断或误判。
安全检查方式：
try {
const rules = sheet.cssRules;
if (rules && rules.length > 0) return true; // 已加载且可读
} catch (e) {
if (e.name === 'SecurityError') return false; // 跨域，跳过
}
真正可靠的加载完成信号是：样式表存在 + sheet.disabled === false + sheet.href 匹配目标URL + sheet.cssRules 可读且非空（或捕获到 SecurityError 后主动放弃）。
跨域样式表永远无法通过 JS 获取规则内容，只能靠 HTTP 状态码或 Service Worker 拦截来确认加载结果——这点容易被忽略，尤其在微前端或 CDN 场景下。
