“web资源加载优先级”原来能这么精准控制

开发者可以控制浏览器资源的加载顺序，但这种控制的粒度能做到多细呢？

本文来聊聊资源加载优先级的问题。

浏览器解析资源的优先级

当浏览器开始解析网页，并开始下载图片、Script 以及 CSS 等资源的时候，浏览器会为每个资源分配一个代表资源下载优先级的 fetch priority 标志。

而资源下载的顺序就取决于这个优先级标志，这个优先级标志的计算逻辑会受很多因素的影响：

• Script、CSS、Font、Image 等不同的资源类型会有不同的优先级。
• 在 HTML文档 中引用资源的位置或顺序也会影响资源的优先级（例如在 viewport 中的图片资源可能具有高优先级，而在  标签中加载的，阻塞渲染的 CSS 则拥有更高的优先级）。
• 有 preload 属性的资源有助于浏览器更快地发现资源、其实也是影响资源加载的优先级。
• Script 的 async 或 defer 属性都会影响它的优先级。

综合考虑这些因素，下面是现在大多数的资源在 Chrome 中的优先级和排序方式：

浏览器按照资源被发现的顺序下载具有相同计算优先级的资源。你可以在 DevTools Network 下看到分配给不同资源的优先级：

尽管浏览器很擅长这件事情，但是并不是所有情况下默认的下载优先级都是最佳的。

为什么你需要 Priority Hints  ？

知道了浏览器为资源分配下载优先级的方式，我们就可以根据实际的业务场景去适当做一些调整：

• 根据期望的资源的下载顺序放置资源标签，例如 





  实际应用

  提升 LCP 图像的优先级

  现在，你拥有了更灵活的优先级配置，你可以用它去提升你网页的 Core Web Vitals 。

  比如，在 Google Flights 这个网页中，影响它 LCP 指标的主要原因是它的背景图片，现在我们用 importance 属性提升它加载的优先级：

  可以发现，网页的 LCP 从 2.6s 提高到 1.9s：

  降低首屏图片的优先级

  使用 importance 属性降低可能不重要的首屏图片的优先级，比如轮播图中后面的图片：

降低预加载资源的优先级

想要阻止预加载资源和其他关键资源的竞争，可以降低其优先级：

脚本的优先级

如果页面上有一些必要的交互脚本，但不需要阻塞其他资源，你可以把它们标记为具有高优先级，同时异步加载它们：

如果脚本依赖于特定的 DOM 节点，则它们不能被标记为异步加载。但是如果它们不是首屏渲染必备的，你可以降低它们的优先级：

fetch

浏览器默认会以高优先级执行 fetch 请求，你可以降低不太关键的数据请求的优先级：

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {importance: 'low'});

开始试用

你可以在 Chrome 的设置中打开 Experimental Web Platform Features 就可以试用这一特性啦。

参考

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests

https://developer.chrome.com/blog/new-in-chrome-96/#pri-hints

https://web.dev/priority-hints/

转自https://mp.weixin.qq.com/s/kaT3qAku86_ihSJA8oC0yQ