符合CSP且无需内联事件脚本的CSS异步加载方案求助，需不升高TBT

开发者阿泽

2026-10-4

失效根因

你写的代码随机失效的核心原因是：如果目标CSS文件加载速度极快（比如缓存命中、文件体积极小），会在JS绑定load事件之前就完成加载，此时load事件已经触发过，绑定的回调永远不会执行，就会出现CSS没有切换media为all的情况。

可靠解决方案

把内联script直接放在所有待异步加载的.AOcssLoad的link标签之后，不需要等待任何DOM就绪事件，代码如下：

<!-- 异步加载的CSS定义 -->
<link rel="stylesheet" media="print" class="AOcssLoad" href="xxx.css">
<link rel="stylesheet" media="print" class="AOcssLoad" href="yyy.css">

<!-- 紧接在CSS后面放这段JS，不要放到页头或者等DOM事件触发 -->
<script nonce="你的合法nonce值" type="text/javascript" data-exclude="true">
(function() {
  const cssLinks = document.querySelectorAll('.AOcssLoad');
  cssLinks.forEach(link => {
    link.classList.add('Loading');
    const onLoadComplete = () => {
      link.media = 'all';
      link.removeEventListener('load', onLoadComplete);
      link.removeEventListener('error', onLoadComplete);
      link.classList.replace('Loading', 'OnLoad');
    };
    // 已经加载完成的直接执行回调，未完成的绑定事件监听
    if (link.sheet || (link.readyState && link.readyState === 'complete')) {
      onLoadComplete();
    } else {
      link.addEventListener('load', onLoadComplete);
      link.addEventListener('error', onLoadComplete);
    }
  });
})();
</script>