ResourceScheduler Tuning Mechanism: Optimizing Critical Image Loading in T7 Browser Kernel

This article introduces Baidu's T7 browser kernel's ResourceScheduler tuning mechanism, which provides front-end developers with the ability to adjust sub-resource loading priority for critical resources.

Background: When browsing pages using Baidu App, faster page rendering and quicker loading of critical above-the-fold images provide better user experience. However, Chromium's native capabilities did not support front-end developers in modifying image resource loading priority. The T7 browser kernel addresses this gap by introducing the ResourceScheduler tuning mechanism.

How to Use:

For IMG tag images: Add importance=high attribute:

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

For CSS background images: Configure background-image-importance:high in style attribute or style tag:

<style>

.bk-img {

background-image:url("xxx.jpg");

background-image-importance:high;

}

</style>

Or in style attribute:

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

Supported Values: The mechanism supports importance=high , low , and auto . When not configured, the kernel's default resource loading priority is used.

Implementation Principles: The article explains the page resource loading flow, resource loading priority initialization for different resource types (CSS, Font, JS, IMG, LinkPrefetch), and the sub-resource loading scheduling mechanism. The kernel uses priority-based scheduling where high-priority resources are allowed to initiate requests first while low-priority resources may be throttled when concurrent requests exceed limits (e.g., more than 6 concurrent requests per domain).

Effectiveness: The mechanism is most effective when a page has many resources from the same domain, as network request competition is higher. When resources from the same domain are few, the optimization space is limited.