通过监听 <link> 元素的 onerror 事件可以检测外部 css 加载失败。具体做法是获取对应的 dom 节点，绑定错误处理函数，并在回调中执行降级逻辑（如移除失效样式或切换备用链接）。
如何为动态插入的样式表添加错误监听？
对于动态创建的 <link> 标签，必须在设置 href 属性之前绑定 onerror 事件，否则可能错过加载失败的触发时机。绑定后，当网络请求返回非 200 状态或资源不可用时，浏览器会立即调用该回调函数。
<script>
function loadCSS(url) {
const link = document.createElement('link');
link.rel = 'stylesheet';
// 必须在设置 href 前绑定事件
link.onerror = function() {
console.error('Failed to load CSS:', url);
// 执行降级逻辑，例如移除该节点
link.remove();
};
link.href = url;
document.head.appendChild(link);
}
loadCSS('https://example.com/style.css');
</script>如何处理多个样式表的并行加载与竞争条件？
当同时加载多个外部 CSS 文件时，每个文件都需要独立的错误监听器。可以通过 Promise 封装加载过程，确保在某个样式表失败时能正确 reject，并允许主流程捕获异常进行统一处理。这种方式避免了手动管理多个回调函数的复杂性。
立即学习“Java免费学习笔记（深入）”；
<script>
function loadCSSPromise(url) {
return new Promise((resolve, reject) => {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.onload = () => resolve(link);
link.onerror = () => reject(new Error(`Failed to load: ${url}`));
link.href = url;
document.head.appendChild(link);
});
}
// 使用示例
Promise.all([
loadCSSPromise('style1.css'),
loadCSSPromise('style2.css')
]).catch(err => {
console.error('One of the CSS files failed:', err.message);
});
</script>如果 CSS 加载超时但未报错，该如何强制终止？
标准的 onerror 事件仅在 HTTP 错误时触发，不会因网络延迟而自动触发。若需处理超时情况，应结合 setTimeout 实现。在发起加载请求的同时启动定时器，若在指定时间内未收到 onload 信号，则手动移除节点并视为加载失败。
