摘要：在日常浏览网页时，我们经常需要加载各种资源，如图片、视频和脚本。然而，某些资源比其他资源更重要，需要优先加载以提高页面加载速度和用户体验。本文将详细介绍如何在谷歌浏览器中设置页面优先级，包括使用预加载和fetchPriority属性等方法。（本文由https:

在日常浏览网页时，我们经常需要加载各种资源，如图片、视频和脚本。然而，某些资源比其他资源更重要，需要优先加载以提高页面加载速度和用户体验。本文将详细介绍如何在谷歌浏览器中设置页面优先级，包括使用预加载和fetchPriority属性等方法。（本文由https://chrome.53ppk.com/的作者进行编写，转载时请进行标注。）

一、了解资源优先级

在谷歌浏览器中，资源的优先级分为五级：

Highest（最高）：如页面HTML资源和CSS文件。

High（高）：如正文图片请求资源。

Medium（中）：如页面的业务JavaScript文件请求。

Low（低）：如内联的Base64资源，异步加载的JavaScript文件请求。

Lowest（最低）：如发送的统计请求。

二、使用预加载提高页面性能

预加载是一种告诉浏览器当前页面最终需要哪些资源的方法。当放置在文档的部分时，浏览器会尽快以“高”优先级下载这些资源。

1. link rel="preload"

这种方法适用于不直接由HTML加载但对页面体验至关重要的资源，如字体、CSS背景图像等。

2. fetchPriority属性

你可以通过fetchPriority属性来明确指示资源的相对优先级。例如：

在这个例子中，font-2将被优先加载。

三、使用fetchPriority属性调整图片加载优先级

对于img标签，同样可以使用fetchPriority属性来设置加载优先级：

这个设置确保了cat-1.jpeg将以最高的优先级加载。

四、利用开发者工具查看和分析资源加载顺序

进入“网络”面板：点击上方的“Network”标签。

刷新页面：按下F5键或点击浏览器上的刷新按钮。此时，开发者工具中的“网络”面板会显示所有资源的加载情况，包括加载顺序、状态、类型、大小等详细信息。

五、实际应用中的优先级调整

1. 提升首屏内容的优先级

对于首屏内容的关键背景图像，可以将其优先级设置为high：

2. 降低非关键资源的优先级

对于轮播图中的第一张图之外的图片，可以使用importance="low"来降低其优先级：

掌握这些技巧后，你可以更有效地控制谷歌浏览器中资源的加载顺序，从而提升网页性能和用户体验。希望这篇教程能够帮助你更好地理解和使用谷歌浏览器的功能。

来源：浏览器之家