图片来源：截图自《New in Chrome 101》 本文作者：万裕晓
我们知道浏览器在解析网页加载资源时，会为每个资源分配优先级，然后再根据优先级顺序来加载资源。虽然浏览器非常擅长对资源进行优先级计算和排序，但是这个排序并非在所有场景中都是最佳的。
在上个月，Chrome 101 正式版本发布，Priority Hints 等新功能在这个版本及以后版本被支持。那什么是 Priority Hints？Priority Hints 是如何影响浏览器资源优先级计算和排序的？以及我们如何通过 Priority Hints 来优化 Web 核心指标？接下来，我们带着这些问题继续阅读寻找答案。
什么是 Priority Hints？
Priority Hints 为开发人员提供了一种新方式（通过指定 fetchpriority 属性的值）来向浏览器表明我们所期望的资源加载的相对优先级。浏览器在对资源进行优先级分配时会考虑到我们标记的优先级信号，从而更好地控制资源加载的顺序。
fetchpriority 属性
fetchpriority 属性可以与 link、script、img 以及 iframe 标签一起使用，该属性允许我们在使用这些标签加载资源（例如：样式资源、字体资源、脚本资源、图像资源和 iframe）时指定优先级。
兼容性
目前看来，fetchpriority 属性仅在基于 Chromium 的浏览器中被支持：
值
fetchpriority 接收三个值：
- high：你认为资源具有高优先级，并希望浏览器在启发式方法允许的情况下将其优先级提高
- low：你认为资源的优先级较低，并希望浏览器在启发式方法允许的情况下将其优先级降低
- auto：你没有偏好的默认值，让浏览器来决定适当的优先级
这里的启发式方法就是说浏览器尝试对资源的重要程度进行最准确地猜测以达到将重要的资源优先加载的目的。但是与任何启发式方法相同，这种猜测往往因为没有足够的信息而导致浏览器做出错误的决定。
Priority Hints 是如何影响浏览器资源优先级计算和排序的？
计算资源加载优先级的过程
根据资源类型给定默认优先级
浏览器首先会对不同类型的资源初始化一个默认的优先级，下面这段代码就是 Blink 中关于不同类型资源的优先级定义：
从上图我们可以看出，Blink 中优先级从高到低依次是：VeryHigh、High、Medium、Low、VeryLow：
- CSS 样式表资源、字体资源具有最高优先级
- 混合类型资源（比如：Ajax 请求）、脚本资源具有高优先级
- 图片资源、视频字幕资源、多媒体资源（比如：视频、音频）、SVG 可缩放矢量图形文件资源优先级较低
- 预加载资源优先级最低
调整优先级
设置默认优先级后，还会针对一些情况调整优先级：
下面这张表展示了最终资源在 Chrome 中的加载优先级：
通过指定 fetchpriority 属性的值调整优先级
上面我们提到 Priority Hints 为开发人员提供了一种新方式（通过指定 fetchpriority 属性的值）来向浏览器表明我们所期望的资源加载的相对优先级。浏览器在对资源进行优先级分配时会考虑到我们标记的优先级信号，从而更好地控制资源加载的顺序。
下面这段代码就是 Blink 中对 fetchpriority 的处理：
通过 AdjustPriorityWithPriorityHint 方法处理后的资源加载优先级表如下：
通过 Priority Hints 优化 Web 核心指标
这里推荐一篇文章《Optimizing resource loading with Priority Hints》很好的讲述了我们如何通过 Priority Hints 来优化我们的 Web 核心指标。
查看资源优先级
最后，我们再来看一下如何利用我们的开发者工具，通过『Network』选项卡下的『Priority』一栏来查看该页面的资源加载优先级：
结合第一张图片和第三张图片不难看出，主资源、在『<head>』中引入的 CSS 样式资源和字体资源（在『initiator』栏中可以看到，字体资源是由『product.css』文件调用）具有最高的优先级，同样在『<head>』中引入的『jquery.min.js』、『stub.en.js』两个脚本资源具有高优先级，async 标记的『stacks.min.js』和 defer 标记的『animations.en.js』、『lazy-load-images.en.js』三个脚本资源具有低优先级。和我们上面的资源加载优先级图表完全契合。
参考链接
[2].《Optimizing resource loading with Priority Hints》
[3].《Resource Fetch Prioritization and Scheduling in Chromium》
