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

前端宇宙

共 2561字,需浏览 6分钟

 ·

2021-12-09 22:55

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

浏览器解析资源的优先级

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

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

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

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

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

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

为什么你需要 Priority Hints  ?

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

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