优化脚本优先级

Web 功能： 提取优先级

浏览器会根据脚本在文档中的位置以及是否具有 async 或 defer 等属性，为脚本分配默认优先级。使用 fetchpriority，开发者可以明确控制，确保关键脚本优先加载，而让非必要脚本不影响加载。

如何实现

  1. 确定关键脚本：确定哪些脚本对网页的核心功能或初始用户互动至关重要。
  2. 提升关键异步脚本的优先级：对于使用 async 或 defer 加载的关键脚本，请添加 fetchpriority="high" 属性，以确保在发现阶段优先加载这些脚本。
  3. 降低非必要脚本的优先级：对于不需要立即执行的脚本（例如分析、广告或首屏下方的微件），请添加 fetchpriority="low" 并确保它们具有 async、defer 或 module 属性，以避免阻塞。
  4. 按顺序加载会阻塞解析器的脚本：在正文末尾对会阻塞解析器的脚本使用 fetchpriority="low"，以防止它们与更关键的资源争夺带宽。

示例代码

<!-- Elevate the priority of the critical app logic -->
<script src="/js/app.js" async fetchpriority="high"></script>

<!-- Deprioritize non-essential tracking scripts -->
<script src="/js/tracker.js" async fetchpriority="low"></script>

<!-- Deprioritize late-body scripts to favor critical images or CSS -->
<script src="/js/legacy-widgets.js" fetchpriority="low"></script>

最佳做法

  • 强制性要求：最多只能在 1-2 个关键脚本上使用 fetchpriority="high"，以避免网络争用和优先级提升效果被稀释。
  • 务必专门针对已知对 Interaction to Next Paint (INP) 至关重要的 async 脚本使用 fetchpriority="high"。
  • 务必使用 fetchpriority="low" 降低初始用户体验不需要的脚本的优先级。
  • 请勿在每个脚本标记上都使用 fetchpriority；只有在已知浏览器的默认启发法不是最佳时，才应使用它来更改默认启发法。
  • 请勿使用已弃用的 importance 属性。它已被 fetchpriority 取代。

后备策略

fetchpriority 属性是一种渐进增强。不支持该属性的浏览器会忽略该属性，并使用其内部调度逻辑，而不会出错。对于基本用法，不需要显式特征检测或回退逻辑。