CSS如何通过Ja vaScript判断样式表是否引入成功：监听link标签的onload与onerror
在动态加载CSS时，一个常见的需求是：如何准确知道样式表是否真的加载并生效了？直接依赖 link.onload 事件？这里有个关键细节需要注意。
Chrome/Firefox支持link.onload/onerror，Safari仅支持onerror；可靠方案是结合事件监听与getComputedStyle轮询检测样式是否生效，并设5秒超时。
link标签的onload和onerror在Chrome/Firefox中确实可用，但Safari不支持onload
先来看一个浏览器间的兼容性“陷阱”。在现代浏览器中，动态创建的 元素，其 onload 和 onerror 事件在 Chrome、Firefox 和基于 Chromium 的新版 Edge 中表现良好，能够可靠触发。然而，一旦遇到 Safari（至少截至 Safari 17.6 版本），情况就变了：Safari 完全不会触发 onload 事件，它只支持 onerror。这意味着，如果你的判断逻辑只依赖于 onload，那么在 Safari 浏览器下，程序会永远等待下去，无法进入“成功”状态。
这背后的根本原因在于，Safari 将 CSS 的加载过程视为一种异步且内部不可观测的行为，因此选择不派发 load 事件。这并非一个 bug，而是因为相关规范并未强制要求浏览器必须这么做，Safari 选择了不实现这一行为。
判断CSS是否真正生效，得看样式是否被应用到DOM上
那么，比单纯监听标签事件更可靠的思路是什么？答案是：直接检测目标样式规则是否已经实实在在地应用到了 DOM 元素的计算样式上。说白了，就是看样式“生没生效”。
一个典型的实现方法是：动态插入一个带有特定测试类名（例如 test-class）的 元素，并在待检测的 CSS 文件中为该类定义一条独特的样式规则，比如 .test-class { opacity: 0.001; }。然后，通过 Ja vaScript 轮询检查这个测试元素的 getComputedStyle(el).opacity 属性值是否变成了我们预设的 "0.001"。
实施这个方案时，有几个要点需要把握：
- 确保测试元素已挂载：必须先将测试元素通过
document.body.appendChild(testEl)插入到 DOM 中，样式计算才会进行。 - 选择独特的测试属性：避免使用可能被其他样式重置的通用属性（如
color）。优先选择干扰小、唯一性高的声明，例如font-family: "css-loaded-123";或者margin-top: 9999px;。 - 合理的轮询机制：轮询间隔建议不小于 16 毫秒（大约一帧的时间）。使用
requestAnimationFrame通常比setTimeout更贴合浏览器渲染周期，也更高效。 - 设置超时兜底：必须设置一个超时时间（比如 5 秒），以防止因网络彻底中断或 CSS 文件存在语法错误而导致脚本无限等待。
兼容性兜底：onerror + onload + 计算样式检测三者组合
在复杂的生产环境中，单一判断机制往往不够保险。最稳健的做法是采用分层、组合式的判断策略：
- 立即绑定
link.onerror：只要此事件触发，通常就意味着加载失败（如 404、CORS 错误、解析错误等），可以立即判定为失败。 - 为 Chrome/Firefox/Edge 保留
link.onload：在这些浏览器中，onload事件是有效的，一旦触发即可快速确认成功。 - 无论事件如何，启动样式检测：在插入
link标签后，无论上述事件是否会触发，都同步启动基于getComputedStyle的轮询检测逻辑（并带上超时限制）。 - 任一成功即成功：只要
onload事件触发，或者样式检测在超时前确认样式已生效，就标记为“引入成功”。只有同时满足超时且触发了onerror时，才最终判定为失败。
下面是一个示例的关键逻辑框架：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/path/to/style.css';
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')); };
document.head.appendChild(link);
// 同时启动样式检测（略去具体轮询实现）
立即学习“Ja va免费学习笔记（深入）”；
注意：@import、CSSOM注入、preload link不适用此监听方式
需要特别强调的是，上述组合方案主要适用于通过 Ja vaScript 动态插入 标签的场景。以下几种情况并不适用：
- CSS 文件内的
@import：对于在 CSS 文件内部使用@import引入的其他样式表，完全没有任何事件可供监听，也无法提前感知其加载状态。 - 通过 CSSOM API 注入规则：使用
document.styleSheets[...].insertRule()这类方式直接注入 CSS 规则，属于运行时操作，不涉及网络加载，自然没有“加载”事件。 ：带有preload属性的 link 标签仅用于预获取资源，不会自动应用样式，并且它也没有onload事件来指示样式应用成功。
话说回来，如果你的应用场景中，link 标签的插入时机不受你控制（例如由第三方 SDK 注入），或者 CSS 是通过构建工具直接内联到 HTML 中的，那么“监听样式表是否引入成功”这个问题本身可能就不成立——因为资源压根没有走网络加载的流程。
