文章插图
当你打开浏览器的网络标签时 ， 你会看到大量的活动 。资源正在下载，信息正在提交，事件正在记录，等等 。
由于有太多的活动，有效地管理这些流量的优先级变得至关重要 。带宽争用是真实存在的，当所有请求同时触发时 ， 有些HTTP请求的优先级并不像其他请求那样高 。例如，如果你必须选择，你可能更希望某人的付款请求成功完成，而不是仅仅表示他们尝试过的分析请求 。而让你的主要图片尽快显示无疑比在页面底部渲染你的标志更为重要 。
幸运的是，浏览器拥有越来越多的工具来帮助优先处理所有这些网络活动 。这些“优先级提示”帮助浏览器在资源有限时，对哪些请求应该优先处理做出更少的假设和更明确的决策 。
这是一套有用的工具，当它们得到很好的利用时 ， 它们可以对页面性能产生实质性的影响，包括那些越来越重要的核心网络指标 。让我们探索其中的一些，以及它们最有帮助的一些场景 。
这是一套有用的工具，当它们得到很好的利用时，它们可以对页面性能产生实质性的影响，包括那些越来越重要的核心网络指标 。让我们探索其中的一些，以及它们最有帮助的一些场景 。
优先加载的资源现代浏览器有一个受到良好支持的方法，可以告诉浏览器当前页面最终需要哪些资源：<link rel="preload" ... /> 。当它放在文档的<head>中时，浏览器会被指示尽快以“高”优先级下载它 。
公平地说，浏览器中的预加载扫描器已经非常擅长这方面的工作 。因此，预加载通常最适用于晚些时候发现的资源 - 任何不直接由你的html加载的东西，比如通过内联样式属性加载的背景图像 。但它也适用于任何其他可能不像你希望的那样被浏览器优先考虑的东西 。
例如：默认情况下，Chrome 会以非常高的优先级加载字体，但如果某人的网络连接速度很慢，它会使用备用字体并降低该优先级 。
考虑一个仅通过css @font-face规则加载的字体：
@font-face { font-family: "Inter Variable"; src: url("./font.woff2") format("woff2");}- 1.
- 2.
- 3.
- 4.
文章插图
但我们可以通过预加载该资源来覆盖浏览器的决定：
<head><!-- Other stuff... --> <link rel="preload" href=https://www.isolves.com/it/wlyx/wzjs/2023-10-25/"/font.woff2" as="font">- 1.
- 2.
- 3.
- 4.
文章插图
你可以直接在链接标签上使用 fetchpriority 来明确指示相对优先级，这在同时预加载多个资源时非常有用 。
这是一个假设的场景，你想预加载两种字体，但想让其中一种优先于另一种：
<link rel="preload" href=https://www.isolves.com/it/wlyx/wzjs/2023-10-25/"./font-1.woff2" as="font" fetchpriority="low" />- 1.
- 2.
文章插图
何时使用通常，当资源不直接由HTML加载 ， 但对页面的体验至关重要时（例如字体、CSS背景图像等） ， 使用预加载 。当预加载多种同类型的资源 ， 且你明确知道哪个最重要时，加入fetchpriority属性 。
优先化 fetch() 请求我认为，Fetch API 是现代网络的最佳工具之一 。与 XMLHttpRequest 相比，它有一些很好的功能 ， 比如在外发请求时发出优先信号的能力 。
最容易想到的用例是：分析请求 。当带宽有限并且有多个请求在执行时，浏览器会自行决定优先级 。但我们作为工程师应该知道，通常的分析请求应该优先于页面目的更为关键的其他请求 。现代的fetch()使这变得简单 。
下面是两个请求几乎同时入队的简单设置：