Felix Ant Financial · Data Experience Technology team

This article mainly introduces the use of preload and the differences between prefetch and preload. Then we’ll talk about browser load priorities.

Preload provides a declarative command that lets the browser load a specified resource ahead of time (but not execute it) and execute it when it needs to be executed. The main benefits provided are

  • Separate loading and execution without blocking onload events for render and document
  • Font fonts that are no longer dependent on the specified resource are loaded in advance and then spawn after a period of time

How do I use Preload

Created using the link tag

<! Statically mark preloaded resources with the link tag -->
<link rel="preload" href="/path/to/style.css" as="style">

<! Or use a script to dynamically create a link tag and insert it into the head.
<script>
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = '/path/to/style.css';
document.head.appendChild(link);
</script>
Copy the code

Created using the Link field of the HTTP response header

Link: <https://example.com/other/styles.css>; rel=preload; as=style
Copy the code

For example, the commonly used ANTD relies on the font. Js font file on a CDN, which can be set to be loaded in advance. In addition, some modules are asynchronously loaded on demand, but we know that they will be loaded in some scenarios, so preload can be set to preload, such as:

<link rel="preload" as="font"   href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">
<link rel="preload" as="script" href="https://a.xxx.com/xxx/PcCommon.js">
<link rel="preload" as="script" href="https://a.xxx.com/xxx/TabsPc.js">
Copy the code

How do I know if my browser supports Preload

The browsers we currently support are mostly advanced versions of Chrome, so use Preload technology with confidence. Support for other environments can be found on caniuse.com as follows:

const isPreloadSupported = (a)= > {
  const link = document.createElement('link');
  const relList = link.relList;

  if(! relList || ! relList.supports) {return false;
  }

  return relList.supports('preload');
};
Copy the code

How to distinguish preload from prefetch

  • Preload tells the browser that the page must require resources that the browser must load;
  • Prefetch tells the browser what resources the page may need and the browser may not load them.

In our scenario, pccommon.js and tabspc.js must be loaded after x-report.js is initialized, so we can preload these resources.

Prefetch is to predict the loading of specified resources. For example, in our scenario, we will initialize the components on the first screen after the page is loaded, and when the user scrolls the page, the components on the second screen will be pulled. If user behavior can be predicted, the components on the next screen can be prefetch.

Preload increases the priority of resource loading

Before using preload, load when a resource dependency is encountered:

Avoid preload abuse

With Preload, Chrome has a warning:

As mentioned above, if you are not sure that the resource will be loaded, don’t use preload incorrectly so as not to put the cart before the horse and add a heavier load to the page.

Of course, you can use preload to flush the cache of resources on a PC, but you need to be careful on mobile because it can waste user bandwidth.

Avoid mixing preload and prefetch

When preload and prefetch are used together, resources are not reused, but loaded repeatedly.

<link rel="preload"   href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" as="font">
<link rel="prefetch"  href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff" as="font">
Copy the code

The logic of using preload and prefetch may not be written together, but if a pair of preload or prefetch resources is used, it will result in a double number of network requests, which can be identified by the Web panel of the Chrome console:

Avoid misusing Preload to load cross-domain resources

If the CSS has a selector that applies to elements rendered into the DOM tree and the @font-face rule is set, the font file will be loaded. When the font file is loaded, these elements in the DOM are invisible. Preloading font files that are known to be loaded not only improves performance, but also improves experience optimization.

In our scenario, antD.css is known to rely on font files, so we can preload this font file:

<link rel="preload" as="font" href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">
Copy the code

However, I found the file loaded twice:

The reason is that when preloading files across domains, we must add the Crossorigin attribute:

<link rel="preload" as="font" crossorigin href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">
Copy the code

If you look at the network request, it becomes one.

The W3 specification explains it this way:

Preload links for CORS enabled resources, such as fonts or images with a crossorigin attribute, must also include a crossorigin attribute, in order for the resource to be properly used.

So why are there two requests with different priorities that don’t hit the cache? Which brings us to our next point of explanation.

Priority rules for loading different resources

Let’s start with a picture:

See Chrome Resource Priorities and Scheduling for this list

This graph shows the priority of loading different resources at different stages of browser rendering in Chrome 46 and later. Here, we just need to focus on DevTools Priority, which is divided into five levels:

  • The Highest Highest
  • High Hight
  • Medium Medium
  • Low, Low
  • Lowest minimum

HTML primary resource, which has the highest priority

CSS style resources have the highest priority

Script Script resources with different priorities

Font font resources with different priorities

The second Highest is the request the style introduces:

As you can see, an Origin header field is missing from the preload request, indicating that the request is anonymous. The current solution is to add the crossorigin attribute to preload, so that the request header will have origin and be the same origin as the request introduced by the style, so as to hit the cache:

<link rel="preload" as="font" crossorigin href="https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff">
Copy the code

That leaves only one request:

conclusion

Preload is a good thing that tells the browser to pre-load the necessary resources for the current page, separating loading from parsing. Doing it well can make a big difference to the first rendering, but to avoid abuse, distinguish it from Prefetch, and know the network priority difference between Preload and different resources.

Preload may be a good combination of resources necessary to load a page, such as font files on the CDN, and prefetch’s prediction of loading the next screen of data.

References:

  • https://www.w3.org/TR/preload/
  • https://www.w3.org/TR/resource-hints/
  • Prioritizing Your Resources with link rel=’preload’
  • Preload, Prefetch And Priorities in Chrome
  • A Link: rel=preload Analysis From the Chrome Data Saver Team

If you are interested in the team, you can follow the column or send your resume to ‘tao.qit####alibaba-inc.com’.replace(‘####’, ‘@’)

Original address: github.com/ProtoTeam/b…