如何控制Web资源加载的优先级？

今天我们一起来看一下 Web 资源加载优先级的问题。

浏览器解析资源的优先级

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

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

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

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

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

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

为什么你需要 Priority Hints  ？

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

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