Chrome Network 面板中的 priority 指的是什么？如何设置？

在Chrome DevTools的Network面板中，每个网络请求都有一个Priority列，这个列显示了请求的优先级。这些优先级由浏览器根据资源类型、标签属性以及加载位置等因素自动分配，它们帮助浏览器决定网络资源请求的加载顺序和速度，以优化页面的加载时间和性能。

常见的优先级级别包括（以Chrome为例）：

• VeryHigh
• High
• Medium
• Low
• VeryLow

这些优先级指示浏览器应该先加载哪些资源。例如，一些关键的脚本和样式表通常被赋予"High"优先级，因为它们对于首次渲染是必需的，而像字体、图像和广告等不那么关键的资源则可能被分配一个较低的优先级。

如何设置请求的优先级？

开发者无法直接控制这些内部优先级值，因为它们是浏览器根据页面的实时情况自动分配的。不过，开发者可以通过一些策略来间接影响优先级，让浏览器更偏向于按照特定的顺序加载资源：

1. 使用<link rel="preload">标签 ：
   通过在HTML中使用<link rel="preload">标签来告诉浏览器某个资源是页面上一个关键资源，使其加载优先级提升。
2. 使用<script>和<link>标签的async和defer属性 ：
   这些属性影响资源的加载和执行时间点。具体来说，async标签会让脚本异步加载，而defer会延迟脚本执行直到文档解析完毕。
3. 通过请求的位置和顺序 ：
   在HTML文档中请求资源的位置和顺序也会影响它们的优先级。通常来说，靠近文档头部的资源会优先加载。
4. 利用服务端推送（HTTP/2 Server Push） ：
   当服务器根据HTTP/2协议推送资源时，可以降低客户端获取这些资源所需的往返次数，这可能会影响资源的加载优先级。
5. 通过媒体类型和媒体查询 ：
   对于条件加载的资源，例如通过媒体查询装入的样式表，可能有更低的加载优先级，因为它们可能不适用于所有情况。

应该注意的是，过度优化请求优先级可能导致资源争抢网络带宽，从而对页面性能产生不利影响。因此，开发者应该专注于至关重要的几个资源的优先级，并且仔细考虑如何使页面以最有效的方式加载和渲染。