浏览器解析资源的优先级
当浏览器开始解析网页，并开始下载图片、Script 以及 CSS 等资源的时候，浏览器会为每个资源分配一个代表资源下载优先级的 fetch priority 标志。
而资源下载的顺序就取决于这个优先级标志，这个优先级标志的计算逻辑会受很多因素的影响：
Script、CSS、Font、Image等不同的资源类型会有不同的优先级。- 在
HTML文档中引用资源的位置或顺序也会影响资源的优先级（例如在viewport中的图片资源可能具有高优先级，而在<link>标签中加载的，阻塞渲染的CSS则拥有更高的优先级）。 - 有
preload属性的资源有助于浏览器更快地发现资源、其实也是影响资源加载的优先级。 Script的async或defer属性都会影响它的优先级。
## 为什么你需要 Priority Hints
知道了浏览器为资源分配下载优先级的方式，我们就可以根据实际的业务场景去适当做一些调整：
- 根据期望的资源的下载顺序放置资源标签，例如
<script>和<link>，具有相同优先级的资源通常按照它们被放置的顺序加载。 - 使用
preload属性提前下载必要的资源，特别是对于浏览器早期不易发现的资源。 - 使用
async或defer下载非首屏不需要阻塞的资源。 - 延迟加载一些首屏内容，以便浏览器可以将可用的网络带宽用于更重要的首屏资源。 但是，以上的几个技术也不能足以让我们在所有场景都能把优先级控制的很好，比如下面的几个场景：
局限
- 网站现在有多个首屏图像，但它们并具有相同的优先级，比如在轮播图中只有第一张图需要更高的优先级。
- 将
<script>声明为async或defer可以告诉浏览器异步加载它们。但是，根据我们上面的分析，这些<script>也被分配了 “低” 优先级。但是你可能希望在确保浏览器异步下载它们的同时提高它们的优先级，尤其是一些对用户体验至关重要脚本。 - 浏览器为
JavaScript fetch API异步获取资源或数据分配了高优先级，但是某些场景下你可能不希望以高优先级请求所有资源。 - 浏览器为
CSS、Font分配了同样的高优先级，但是并不是所有CSS和Font资源都是一样重要的，你可能需要更具体的指定它们的优先级。
所以，浏览器又给我们提供了一个能更好控制资源优先级加载的功能：Priority Hints。
importance 属性
你可以使用一个 importance 属性来更细力度的控制资源加载的优先级，包括 link、img、script 和 iframe 这些标签。
importance 属性可以指定三个值：
high：你认为该资源具有高优先级，并希望浏览器对其进行优先级排序。low：你认为该资源的优先级较低，并希望浏览器降低其优先级。auto：采用浏览器的默认优先级。
