百度APP浏览内核资源加载优化实践 -- ResourceScheduler 调优机制

名词解释

• T7浏览内核 - 百度App内核团队基于Chromium项目面向移动端深度定制优化的高性能浏览内核

• ResourceScheduler 调优机制 - T7浏览内核给前端提供一种调整子资源加载优先级的能力

1. 前言

使用百度App 浏览页面时，页面展现的速度越快、越流畅，首屏关键图片越快速加载显示，越能给用户带来更好的页面浏览体验。本文主要讲述的话题是如何提升首屏关键图片加载显示速度。前端同学在编写H5页面的时候，针对非常重要的图片资源，比如广告/宣传照片等，特别希望能让它更快加载显示，但目前 Chromium 原生能力现状无法支持前端同学去更改提升图片资源的加载优先级，前端同学无计可施。莫着急，T7浏览内核默默给前端同学带来一个小干货，让前端可以配置关键图片资源的加载优先级，从而提升图片加载速度。接下来，跟随小编的步伐来更深入了解该功能吧！

大家可能有过一个疑问：在一个网页加载过程中会有很多类型的子资源同时在加载（JS、CSS、IMG 资源等），那么多子资源在整个页面加载过程中是怎么井然有序地加载的呢？

大家也可能遇到过一个问题：页面内可能会有很多图片展示，有大图和小图，首屏大图的加载显示体验往往比小图更重要。但是如果我们没法控制让大图优先加载，可能会出现大图比小图滞后显示的问题，那么我们有没有办法主动去提高首屏内大图的加载优先级让大图优先显示出来呢？

由此产生一个优化想法，设计 ResourceScheduler 调优机制来解答和解决该问题。

ResourceScheduler 调优机制给前端提供一种调整子资源加载优先级的能力，前端可根据自身业务需求，自行配置调整页面关键子资源加载优先级，提升该资源的加载优先级，让关键子资源优先发起请求，从而提升该关键资源加载速度。

丨3.1 如何使用 ResourceScheduler 调优机制

以我们关注的首屏关键图片资源调优为例，我们希望提高该关键图片资源加载的优先级，以提升关键图片的加载显示速度，方法如下：

针对 IMG 标签图片资源调优：标签内加上 importance=high 属性。

 <img importance=high src="xxx.jpg">

针对 CSS 背景图调优：在style属性或者style标签内配置 background-image-importance:high。
1）style标签

<style>  .bk-img {      background-image:url("xxx.jpg");      background-image-importance:high;  }</style>

2）style属性

<div style="background-image:url(xxx.jpg);background-image-importance:high">

ResourceScheduler 调优机制也提供了配套的收益指标打点和反馈前端接口，可供页面获取收益数据。

丨3.2 效果对比

回到最初的问题：页面内可能会有很多图片展示，有大图和小图，首屏内大图的加载显示体验往往比小图更重要，我们可以使用 ResourceScheduler 调优机制提高首屏内大图的加载优先级，让更关键的大图优先显示出来，解决大图加载显示比小图滞后的问题。

再比如，前端页面业务觉得首屏内最大图9.jpg比较重要，希望提高9.jpg加载优先级，可将9.jpg配置为 importance=high，该图片能有机会更快加载显示出来，可看到9.jpg相比1～8.jpg图片更早更快加载显示。

丨3.3 支持范围

ResourceScheduler 调优机制支持 IMG 标签图片和 CSS 背景图、JS、link 标签配置子资源加载优先级，前端可配置的属性值为 importance=high、low、auto，不配置时默认保持内核默认的资源加载优先级。

ResourceScheduler 调优机制适用于页面同域名下资源较多场景。当页面同域名下的资源越多，网络请求竞争越大，ResourceScheduler 调优机制效果会越好；当页面同域名下的资源很少，网络请求竞争很小，此场景下通过 ResourceScheduler 调优机制来优化资源加载的空间不大。

丨4.1 页面资源加载流程

在介绍 ResourceScheduler 调优机制实现原理之前，先初步介绍一下页面资源加载流程。

以上是页面主文档资源和子资源加载流程。可以看到在发起主文档资源请求之前，会先查找该主文档资源是否在 HTTPCache 当中，若存在则直接复用 HTTPCache 主文档资源，不再发起资源请求。在发起子资源请求之前，会优先查找该子资源是否在 MemoryCache，若存在则直接复用 MemoryCache 中的子资源数据，若不存在则继续查找该子资源是否在 HTTPCache 当中，若存在则直接复用 HTTPCache 中的子资源数据，不再发起资源请求，若都不存在时才发起子资源请求获取数据，各个子资源请求之间会存在网络请求资源竞争。

为减少网络请求的影响，T7浏览内核设计了资源缓存机制，网络资源加载可以直接复用已缓存数据，无需发起网络请求。T7浏览内核缓存机制介绍详见之前发表的技术文章《T7浏览内核缓存优化之MemoryCache》，本文不再赘述。本文主要介绍T7浏览内核的配置子资源加载优先级功能，允许前端可主动配置子资源加载优先级，让关键子资源在各种子资源网络请求竞争中有机会优先发起请求，从而达到提升该关键资源加载速度效果。

丨4.2 资源加载优先级

在页面资源加载过程中，内核是根据资源加载优先级对资源进行排优调度加载的，每个资源都有对应的加载优先级。

根据资源类型不同，首先统一给各类资源初始化默认的加载优先级。

为了满足不同场景下的资源加载体验，内核会再继续根据不同资源场景稍微做下优先级调整。例如 defer 的 JS 下载和执行完全不影响页面解析渲染，该场景的 JS 不需要 High 这么高的资源加载优先级，应调低该场景的 JS 资源加载优先级。

最终每一个子资源都有唯一确定的资源加载优先级，在后续资源加载过程中会使用该优先级进行排优调度加载。

丨4.3 子资源加载调度原理

页面众多子资源的加载，受内核子资源加载优先级调度机制来调度加载处理，主要原理如下：

主要的调度管控规则如下：

资源加载调度管控：在资源加载调度阶段的管控策略相对粗旷，有限制策略让高优资源优先发起请求，低优先级资源会被管控，详细规则如图所示：

资源网络请求调度管控：经过资源加载调度管控后，能继续到达网络库的资源请求，还需要经过网络库资源请求调度管控，高优先级资源优先发起请求，低优先级资源会被管控。任意资源下载完成后，会遍历获取被管控的资源请求，并再次调度处理，管控规则如图所示：

低优先级资源请求如下情况会被管控：
1）同域名下同时正在请求的资源超过6个
2）同 Document 下同时请求的低优先级资源超过10个

从上图流程可以看到，同域名下资源超过6个时，在页面加载过程中，该域名下的低优先级资源可能会被管控。同域名下低优先级资源越多，被管控越明显，所以当页面同域名下的资源越多，网络请求竞争越大，使用 ResourceScheduler 调优的关键资源有机会能从中脱颖而出，效果会越明显。

内核子资源加载优先级调度机制保障页面中的各类资源井然有序地被调度加载，保障 CSS、Font、JS 等高优先级子资源优先发起请求，IMG 图片资源、LinkPrefetch 资源等低优先级子资源可能延后发起请求。

丨4.4 ResourceScheduler 调优机制实现思路

1. 前端在 IMG 等标签配置 importance 属性，内核会解析获取并转化为资源加载优先级，然后在资源加载阶段去干预更新该资源的加载优先级，结合内核子资源加载优先级调度机制，会干预调优该子资源加载的整个流程，调优资源加载体验。

2. 前端在 CSS 配置背景图 background-image-importance 属性，内核在Style&Layout 阶段获取该优先级信息，并进行背景图加载调优。

ResourceScheduler 调优机制是T7浏览内核针对提升首屏内关键图片资源加载性能所做的优化之一，未来我们将努力在页面加载性能和资源加载性能方面继续探索优化，给业务提供更高性能的浏览内核，给用户带来更好的页面浏览体验。