如何使用优先级提示，优化浏览器的资源加载？

为了使网站更快的展示在用户面前，我们可以让浏览器优先加载更重要的资源。

img, iframe, script, and link 等标签的新属性fetchpriority 可以通过标记html的优先级来实现这一想法。

什么是优先级提示？

浏览器加载资源的时候，会尝试猜测资源的重要程度，例如，加载css具有高优先级，而异步脚本可以以低优先级加载。

但是有时浏览器并不清楚资源的重要性，例如，默认情况下，加载图片具有较低的优先级，但有时候这并不是我们想要的，因为主页内容的图片应该被更加快速的加载。

通过给这些资源添加一些信息，能够帮助识别资源的重要程度。例如fetchpriority这个属性能够标记这个图片作为高优先级被浏览器加载。

<img src="photo.jpg" fetchpriority="high">

点击链接Largest Contentful Paint.可以查看能够提高图片加载优先级的常见案例。

一个真实的优先级案例

看这个网站主要图片的请求瀑布

• 页面首次呈现后，优先级由Low变为High
• 瀑布流中有一条长长的灰色条，表示浏览器知道这个资源，但是并没有开始加载。

然后我们给两张图片设置 fetchpriority=high, 使他们称为LCP元素。

现在这个优先级不再变化了，当请求页面的时候，图片会立即被加载。

因此， LCP从 4.2s 变成了1.9s。

picture 标签 和 优先级提示

HTML 的 picture 标签允许开发者指定可能的图像文件，然后浏览器根据文件类型和分别率选择最合适的图片加载。

通过给 picture 标签内的 img 标签添加 fetchpriority 属性，能够实现给 picture 标签添加优先级。

<picture>
  <source srcset="/image-small.png" media="(max-width: 600px)">
  <img src="/image.png" fetchpriority="high">
</picture>

什么元素支持fetchpriority属性？

可以给下面的元素设置优先级，来控制请求资源的优先。

• img
• script
• link
• iframe

例如，你想给页面预加载一个背景图片，默认这个图片的请求是低优先级的，可以通过设置fetchpriority来改变

<link rel="preload" as="image" href="/background.webp" fetchpriority="high" />

如何在http请求头中设置优先级提示？

除了在html 中使用 link 标签来 预加载资源外，还可以在文档的请求头中设置 fetchpriority 提示

Link: </background.webp>; rel=preload; as=image; fetchpriority=high

如何在fetch中设置优先级提示？

fetch 允许开发人员从后端请求 json 格式的数据

默认这些请求都是高优先级的，你也可以给它设置成低优先级的。

const req = new Request("/data.json", { priority: "low" });
fetch(req).then(res => res.json).then(res => console.log("Response", res));

浏览器的支持情况？

自2022年4月101版本以来，Chrome一直支持优先级提示。Edge也支持优先级提示。

怎么验证优先级提示让你的网站加载的更快了？

如何查看网站请求优先级，一级他们初始化渲染后是否发生变化？

跑一个数据看看free website speed test。

在请求流中包含每个资源加载的详细情况

翻译原文 www.debugbear.com/blog/priori…