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

发布时间 2023-11-10 16:03:10作者: 圣迭戈

在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属性支持的所有值了。