如何更细粒度控制web资源加载的优先级？

一、链接类型：prefetch

关键字 prefetch 作为元素 的属性 rel 的值，是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器有可能通过事先获取和缓存对应资源，优化用户体验。

<link type="text/css" href="main.css" rel="prefetch">

二、链接类型：preload

当在 元素上设置了 rel="preload" 时，link 的 as 属性为必填属性

当设置了 rel="modulepreload"时，as 属性为可选属性，否则不应使用。

as

它指定了 正在加载的内容类型，这对于匹配请求、应用正确的内容安全策略和设置正确的 Accept 请求标头都是必要的。

此外，rel="preload" 将其用作请求优先级的信号。下表列出了该属性的有效值及其适用的元素或资源。

三、script标签的defer和async属性

defer和async属性都是script标签的属性，它们都是控制script标签加载的优先级，但是它们有区别。

defer这个布尔属性：

• 属性的设置是为了向浏览器表明，该脚本是要在文档被解析后，但在触发 DOMContentLoaded 事件之前执行的

• 包含 defer 属性的脚本将阻塞 DOMContentLoaded 事件触发，直到脚本完成加载并执行。

本属性不应在缺少 src 属性的情况下使用（也就是内联脚本的情况下），这种情况下将不会生效。defer 属性对模块脚本也不会生效——它们默认是 defer 的。

async这是个布尔属性：

• 对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。

• 对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。

四、importance 属性

你可以使用一个 importance 属性来更细力度的控制资源加载的优先级，包括 link、img、script 和 iframe 这些标签。

importance 属性可以指定三个值：

• high：你认为该资源具有高优先级，并希望浏览器对其进行优先级排序。
• low：你认为该资源的优先级较低，并希望浏览器降低其优先级。
• auto：采用浏览器的默认优先级。