This is the 30th day of my participation in the First Challenge 2022, for more details: First Challenge 2022

The most common use is to load a CSS style file, written as follows:

<link rel="stylesheet" href="./index.css">
Copy the code

The REL attribute means “relationship,” and its value stylesheet indicates that a stylesheet is in use.

Href represents the address of the resource from which the current HTML file loads its content.

However, Link does more than that. It can control the download priority of resources, advance the connection, and specify the domain name.

preload

<link rel="preload" href="./main.css" as="style">
Copy the code

Preload, preload. This function increases the download priority of the resource to the highest.

Preload is responsible for prioritizing downloads and loading them well, but not for embedding resources into the page. You need to find the right place to explicitly embed them.

Preload also does not affect the order in which resources are executed.

If multiple resources use preload, the first to set preload is the first to download.

The as attribute is mandatory. The value varies according to the file type. For example, the AS value of the CSS file is style.

Scenarios are:

  • CSS with fonts are loaded first to prevent sudden font changes.
  • The on-demand package js file is loaded first.

prefetch

<link rel="prefetch" href="lib/jquery.min.js" as="script">
Copy the code

Prefetch, grab it by hand and use it on the next page.

For a resource with Prefetch set, the browser will think that the resource is not currently used, but may be used in the next page, so the download priority of the corresponding resource will be lowered to Lowest (Lowest).

After the other resources are loaded, the download queue is idle and the resource is cached for download.

If you use this resource, you will see prefetch Cache in the Network panel of developer tools.

Scenarios are:

  • When introducing the use of tools on the homepage of the tool class official website, secretly load some resources required by the real tool page and wait for users to click in. Improve the loading speed of the tool page and improve user experience.

preconnect

<link rel="preconnect" href="https://cdn-s1.somecdnsite.com">
Copy the code

Preconnect is used to connect to the target server in advance.

This connection process includes (1) DNS lookup to get the IP, (2) TCP three-way handshake, and (3) HTTP or HTTPS connections.

It’s a little tedious, but we can do this connection ahead of time, save a couple hundred milliseconds or so and that’s a good thing. The effect may be better when the network is not good or fluctuated.

Scenarios are:

  • Connect the domain name of common CDN resources
  • The video will not be played. Before the user clicks play, we will connect the corresponding domain name

dns-prefetch

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

Dns-prefetch is used to obtain the IP address corresponding to the specified domain name through DNS query. When requesting resources under the domain name, DNS query can be avoided.

A more granular version of PreConnect.

If preconnect is used too much, it may block normal requests. You can use dnS-Prefetch with appropriate amount to reduce the time cost.

The scenario is the same as preconnect.

At the end

Let’s summarize:

  • Preload: Increases the priority of resource loading. Suitable for loading fonts in advance, loading language packages and other scenarios,
  • Prefetch: Reduces the resource load priority and caches the download when it is idle. This is suitable for scenarios where the next page uses the resource cache to speed up loading.
  • Preconnect: preconnects to the target domain name, including DNS query, TCP, and HTTP(S) connections.
  • Dns-prefetch: the IP address of the target domain name is queried in advance.