Preload page resources with Preload to keep your page up for 10 seconds

In browsers that do not support Preload, the corresponding link tag is ignored, and if feature detection is required, then:

const isPreloadSupported = () => { 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.

JS Chinese – front-end advanced resources tutorial www.javascriptC.com


A platform dedicated to helping developers change the world with their code, find the top stories in the tech world every day

Preload increases the priority of resource loading

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

With preload, resources are loaded ahead of time regardless of whether they are in use:

As you can see, the load order of preload resources will be brought forward:

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

JS Chinese – front-end advanced resources tutorial www.javascriptC.com


A platform dedicated to helping developers change the world with their code, find the top stories in the tech world every day

HTML primary resource, which has the highest priority

CSS style resources have the highest priority

CSS(match) refers to a valid style file that has rules for the existing DOM.

Script Script resources with different priorities

The first three JS files are static resource dependencies written in HTML, while the last three js files are component resource dependencies asynchronously loaded on demand based on the first screen, which validates this rule.

Font font resources with different priorities

The CSS style file has a @font-face that depends on a font file, and the font file that depends on the style file has the Highest loading priority; If the crossorigin attribute is not specified when preload is used, anonymous CORS will be used to load the file. The priority is High.

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:

In the network waterfall flow diagram, it also shows successful preloading and no second loading of subsequent hit cache:

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

Original address: github.com/ProtoTeam/b…