修改Web网页中资源加载的优先级

在Chrome浏览器中，网络请求的优先级分成了5个等级：

• Highest 最高，如页面HTML资源和CSS文件；
• High 高，如正文图片请求资源；
• Medium 中等，如页面的业务JavaScript文件请求；
• Low 低，如内联的Base64资源，异步加载的JavaScript文件请求；
• Lowest 最低，如发送的统计请求；

调整preload预加载默认的优先级加载规则，可以使用fetchPriority属性进行重置。

例如某个在CSS文件中的图片非常重要，必须高优先级加载，在可以像下面这样设置：

<link rel="preload" href="./important-source.png" as="image" fetchPriority="high" />

　fetchPriority属性还可以用在元素上来降低图片的请求优先级，例如：

<img src="example.png" fetchPriority="low" />

虽然Chrome浏览器下的网络请求有5个等级，但是fetchPriority属性值可以设置的等级只有两个，Low或者High，除此之外还支持默认值auto，这三个值就是fetchPriority属性支持的所有值了。