In the article is to explore the web resources on earth is how to block the browser loads in the introduction to the load of JS will block the DOM, style blocks rendering of the page, the custom font in the outer chain style will cause flash to the text to the user a bad experience, such problems still have a lot, that is how to solve them?

Today we will learn how to solve these problems by adding specific attributes to the link tag, such as preload, prefetch, etc. What do you know about these attributes? Did you use them to optimize your project?

preload

Preload prioritizes resource loading so that it starts loading earlier (preloading) and can be used more quickly when needed. In addition, the onLoad event must wait until all resources on the page are loaded, and when preload is added to a resource, the resource will not block the onLoad.

How to use preload

When a page is loaded with two scripts jquery.min.js and main.js:

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="./main.js"></script>
Copy the code

At this time the page of resource loading Waterfall looks like this:

After preloading main.js with the tag in :

<link rel="preload" as="script" href="./main.js">
Copy the code

In this case, the loading order of main.js appears before jquery.min.js, which is the effect of preload to increase the loading priority of resources.

When refreshing the browser all the time, the occasionally appearing Waterfall cannot accurately display the loading sequence of resources, so at this time, it needs to compare the time when each resource is added to the download queue, such as the following main.js queue time is early because of preload.

just preloads the resource, but the resource will not be executed once it is loaded, so you need to introduce it where you want to execute it via 

<script src="./main.js"></script>
Copy the code

There is an exception, however, because CSS loading is also introduced via the tag, so we can take advantage of this subtly by changing the rel property value when the onload event is triggered to change it from the preloaded style to the imported style:

<link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
Copy the code

If a resource is loaded via preload but not used, the browser will issue a warning:

In addition to preloading scripts, preload can also specify other resource types via AS, such as:

  • styleThe style sheet;
  • font: font file;
  • image: picture file;
  • audio: audio file;
  • video: video file;
  • document: the document.

Preload application case

Preload is used to increase the download priority of some blocked resources on the current page so that the page can be rendered as quickly as possible.

Case 1: Preload the download of resources defined in CSS, such as custom fonts

When a custom font is used on a page, the font must be introduced into the CSS. The font must be downloaded after the browser finishes and parses the CSS file. Therefore, the font may flash on the corresponding page. Type can be used to specify the specific font type. Loading a font must specify the Crossorigin attribute, otherwise the font will be loaded twice.

<link rel="preload" as="font" crossorigin type="font/woff2" href="myfont.woff2">
Copy the code

This is equivalent to specifying crossorigin=”anonymous”.

Case 2: Preloading the CSS file

There has always been a technique in first-screen loading optimization called extracting critical CSS, which means extracting the styles that appear in the viewport from a separate CSS file critical. CSS, and then placing the rest of the styles in a separate file non-critical. CSS:

Because CSS blocks the rendering of the page, when loading the two styles at the same time, as long as the non-critical. CSS is not complete, the page will not display, but in fact only need to display the interface under the viewport, so the expected result is: When critical. CSS is loaded, the interface under viewport is displayed immediately. Non-critical. CSS does not block rendering.

<link rel="preload" as="style" href="https://bubuzou.com/non-critical.css">
<link rel="stylesheet" href="https://bubuzou.com/critical.css">
<link rel="stylesheet" href="https://bubuzou.com/non-critical.css">
Copy the code

Case 3: Creating a dynamic preloaded resource

DownloadScript is called when preloading is required and the runScript function is called when execution is desired.

function downloadScript(src) {
    var el = document.createElement("link")
    el.as = "script"
    el.rel = "preload"
    el.href = src
    document.body.appendChild(el)
}
    
function runScript(src) {
    var el = document.createElement("script")
    el.src = src
}
Copy the code

Case 4: Preloading responsive images with media queries

Preload can even load resources at the corresponding size in combination with media queries. For the following code, preload the image when the viewable area size is less than 600px.

<link rel="preload" as="image" href="someimage.jpg" media="(max-width: 600px)">
Copy the code

Case 5: CombinationWebpackpreloadJSThe module

Webpack supports configuring preloaded modules in magic notes from version 4.6.0:

import(_/* webpackPreload: true */_ "CriticalChunk")
Copy the code

For older versions, use the preload-webpack-plugin.

prefetch

Preload is used to pre-load resources for the current page, while Prefetch is used to load resources for future use (such as the next page) and tells the browser to download when it is free, which minimizes the priority of downloading resources.

For example, configure the following code on the home page:

<link rel="prefetch" as="script" href="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js">
Copy the code

We can see from the page that the download priority of the script has been lowered to Lowest:

After the resource is downloaded, it is stored in the browser cache. If the script is introduced in page A when the page is switched from the home page to page A, the browser directly reads the resource from the Prefetch cache to optimize resource loading.

preconnect

When the browser requests a resource from the server, it needs to establish a connection. Establishing a secure connection requires the following three steps:

  • Query a domain name and resolve it to an IP address (DNS Lookup).
  • Establish an Initial connection with the server.
  • Encrypting connections to ensure security (SSL);

All three of these steps require the browser to communicate with the server, and the back and forth between requests and responses can take a lot of time.

Because of this, you can optimize with preconnect or DNS-Prefetch. What are those two? How do you use it?

What is Preconnect and how does it work

When we need to other sites under the domain of resource requests, needs to establish a connection with the domain, and then you can start download resources, if I know is which domain and communication, it can not establish a connection first, then when the need for resource requests can be downloaded directly.

Assuming the current site is https://a.com, the home page of the site needs to request the resource https://b.com/b.js. When comparing normal requests with requests with PreConnect configured, they appear differently on the request timeline:

To establish a connection to https://b.com, do the following:

<link rel="preconnect" href="https://b.com">
Copy the code

Using PreConnect to establish early connections to third-party sources can reduce load times by 100ms to 500ms, which may seem trivial, but is a significant improvement in page performance and user experience.

You should use PreConnect as soon as possible after setting up a connection with another domain, because the browser closes all connections that have not been used within 10 seconds. Unnecessary preconnections delay other important resources, so limit the number of Preconnect domains.

Preconnect application scenarios

Scene 1:

When you know which source a resource is coming from, but you are not sure which resource to load, for example:

Either they are dynamic or they carry different parameters for different environments, so they are good for loading with PreConnect.

Scene 2:

If you have streaming media on your page, but it doesn’t play as fast, and you want to start as soon as possible when you press the play button, you can use PreConnect to pre-establish a connection and save some time.

If the resource that preconnects with preConnect is a font file, the Crossorigin attribute is also required.

dns-prefetch

Usually we remember a website by its domain name, but for a server, it remembers them by IP. The browser uses DNS to convert the site to an IP address, which is the first step in establishing a connection and usually takes about 20ms to 120ms. Therefore, this step can be saved by dnS-prefetch.

Why do you need dnS-prefetch to reduce the first DNS lookup resolution of a connection when preconnect can reduce the total connection setup time?

If a page introduces a lot of third-party domain resources and they are pre-connected through PreConnect, the optimization effect is not good, or even worse, so the alternative is to use PreConnect for the most critical connections. For others, dns-prefetch can be used.

You can configure dnS-Prefetch as follows:

<link rel="dns-prefetch" href="https://cdn.bootcss.com">
Copy the code

Also, since preconnect is slightly less browser compatible than DNS-Prefetch, look at the following figure:

Therefore dnS-Prefetch can be used as a backup option for browsers that do not support preconnection, and can be configured with both:

<link rel="preconnect" href="https://cdn.bootcss.com">
<link rel="dns-prefetch" href="https://cdn.bootcss.com">
Copy the code

Refer to the article

  • Critical path rendering optimization for front-end performance optimization
  • Web. Dev/link – prefet…
  • www.w3.org/TR/resource…
  • Preload, Prefetch and their priorities in Chrome
  • preload-prefetch-preconnect
  • Web. Dev/extract – cri…