浏览器资源加载的优先级

前言

本文为自己阅读 文章 时的笔记，如果想准确学习资源加载的优先级，建议点此 阅读原文 。

简介

个人理解：想要提升页面的加载速度，需要知道页面的资源是如何加载的；了解资源优先级，就可以知道浏览器是按照什么顺序来加载这些资源。

说明

• 本文截图及功能说明，使用的 Chrome 版本为： 72.0.3626.119（正式版本） （32 位）；

浏览器加载资源过程

资源优先级的命名

资源的优先级被分为 5 级，不同场景命名略有不同：

• 网络层面， 5 级分别为： Highest 、 Medium 、 Low 、 Lowest 、 Idle ;
• 浏览器内核， 5 级分别为： VeryHigh 、 High 、 Medium 、 Low 、VeryLow ;
• 用户控制台显示， 5 级分别为： Highest 、 High 、 Medium 、 Low 、 Lowest ;

资源的优先级别

默认加载顺序

浏览器首先会按照资源默认的优先级确定加载顺序：

1. html 、 css 、 font 这三种类型的资源优先级最高；
2. 然后是 preload 资源（通过 <link rel=“preload"> 标签预加载）、 script 、 xhr 请求；
3. 接着是图片、语音、视频；
4. 最低的是prefetch预读取的资源。

资源优先级提升

浏览器会按照如下规则，对优先级进行调整：

1. 对于XHR请求资源：将同步 XHR 请求的优先级调整为最高。
2. 对于图片资源：会根据图片是否在可见视图之内来改变优先级。图片资源的默认优先级为 Low 。现代浏览器为了提高用户首屏的体验，在渲染时会计算图片资源是否在首屏可见视图之内，在的话，会将这部分视口可见图片 ( Image in viewport ) 资源的优先级提升为 High 。
3. 对于脚本资源：浏览器会将根据脚本所处的位置和属性标签分为三类，分别设置优先级。
   1. 首先，对于添加 defer / async 属性标签的脚本的优先级会全部降为 Low 。
   2. 然后，对于没有添加该属性的脚本，根据该脚本在文档中的位置是在浏览器展示的第一张图片之前还是之后，又可分为两类。在之前的 ( 标记 early** ) 它会被定为High优先级，在之后的 ( 标记 late** ) 会被设置为 Medium 优先级。

控制台查看资源优先级