如何通过使用优先级提示，来控制所有网页资源加载顺序( 三 ) _网页

异步脚本在优先级中被降低：

文章插图
控制台确认，在 async 脚本加载过程中，允许解析和执行后续脚本。

文章插图
非阻塞，但高优先级的脚本大多数时候，这种行为都很好。但有时，你可能希望脚本既以“高”优先级加载，又异步加载。
一个可能的场景是在落地页的英雄部分安装一个小的 SPA 。为了保留页面的核心网络指标，特别是LCP和FID（首次输入延迟，很快将被下一个绘制的交互所取代），你需要高度优先这个脚本（毕竟，它负责构建和供电你的应用）。但同时，你不希望它阻止页面的其余部分进行解析。
所以，我们给它一个fetchpriority：

<script src=https://www.isolves.com/it/wlyx/wzjs/2023-10-25/"/script-async.js" async notallow="console.log('async')" fetchpriority="high">

现在，它以提高的优先级下载，同时仍然不阻止页面的其他部分：
【如何通过使用优先级提示，来控制所有网页资源加载顺序】

文章插图
控制台验证了这一点。有了更高的优先级，异步脚本加载得更快。在这种情况下，甚至比同步和内联的还要快。

文章插图
虽然我这里没有特意玩它，但是，是的，fetchpriority 也适用于延迟的脚本。
何时使用当你提前知道脚本的优先级，并且怀疑浏览器可能没有足够的信息来自行决定时，将 fetchpriority 放在你的脚本上。正如我所提到的，对于你希望以非阻塞、异步的方式加载的脚本，优先化它们特别有帮助。
有意使用很容易对这样的工具过于热衷，导致过度使用。所以，要小心 - 这样做可能会付出代价。正如俗话所说：“强调一切=强调无。”事实上，过度使用可能实际上使得浏览器更难管理网络争用，损害页面的性能。
MDN 甚至特意在他们的优先级提示文档中指出：

仅在浏览器可能无法自动推断加载资源的最佳方式的特殊情况下使用它。过度使用可能会导致性能下降。

所以，不要因为这些工具存在就觉得有义务使用它们。小心使用。
回顾：何时提示这里有很多内容，所以让我们快速回顾一下你可能选择使用优先级提示的时机。这些都不是详尽无遗的。只是一些好的开始。

当你希望浏览器知道多个晚些时候发现的资源，其中一些比其他资源更对页面至关重要时，提示预加载的资源。
提示你知道是用户体验的关键部分的 fetch() 请求，或者可以安全地被降级以为更重要的请求让路。
提示你希望尽快加载和显示的首屏图像。
提示对页面功能至关重要的脚本，但你不希望阻止页面的其他部分（包括其他资源）被解析和下载。

让浏览器猜得少些浏览器非常擅长弄清楚如何以及何时下载使我们的页面运行的东西。但它并不总是那么好。它不知道一个页面存在的原因，也不知道它的各个部分背后的意图。所以偶尔，它可以使用一些额外的帮助。
这就是为什么这些优先级提示存在的原因：为了使指令清晰，并且让浏览器很少有机会做出错误的决策。下次当你研究自己应用程序的网络活动时，记住它们，当有意义时，使用它们来帮助使你的页面性能更加智能。