如何像预加载/延迟CSS一样处理JavaScript文件？

当然可以用类似思路处理JS文件，不过和CSS直接修改rel属性就能生效不同，预加载的JS不会自动执行，需要在onload事件中动态创建<script>标签来加载并执行预加载好的资源，具体实现如下：

<!-- 预加载JS文件 -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.2.0/video.min.js" as="script"
      onload="
        const script = document.createElement('script');
        script.src = this.href;
        script.integrity = 'sha512-xxxxxxx'; // 替换为对应JS文件的真实integrity哈希值
        script.crossorigin = 'anonymous';
        script.referrerpolicy = 'no-referrer';
        document.body.appendChild(script);
        this.onload = null;
        this.remove();
      "
      integrity="sha512-xxxxxxx"
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
>

<!-- 无JavaScript环境下的降级方案 -->
<noscript>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.2.0/video.min.js"
          integrity="sha512-xxxxxxx"
          crossorigin="anonymous"
          referrerpolicy="no-referrer">
  </script>
</noscript>

关键细节说明： #

• 必须将as属性设置为script，这能让浏览器正确识别资源类型，保障预加载的优先级和缓存策略
• 预加载的JS资源仅会被下载缓存，不会自动执行，所以需要通过动态创建<script>标签触发执行，此时浏览器会直接复用预加载的缓存，不会发起重复请求
• 务必替换代码中的integrity值为对应JS文件的官方提供哈希，确保资源完整性和安全性
• 执行完成后可以移除原<link>标签，避免冗余DOM元素残留

内容的提问来源于stack exchange，提问作者David Stanton