CSS加载状态监控方法：JS监听onload与onerror

本文深入解析了CSS样式表加载状态监控的实战难点与跨浏览器兼容方案，重点揭示了link元素onload/onerror事件在Chrome/Firefox中可用但Safari（iOS 17/macOS 14）仍不支持这一关键陷阱，并给出“优先监听原生事件 + 安全降级轮询document.styleSheets”的可靠策略；同时澄清了动态插入link时事件绑定时机的硬性要求、@import嵌套加载无法被原生事件捕获的本质限制，以及跨域样式表导致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() 预加载主文件，手动解析并提取 @import URL 再逐个请求
• 服务端尽量避免深度 @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 场景下。

今天关于《CSS加载状态监控方法：JS监听onload与onerror》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！