The difference between dns-prefetch, prefetch, preload, defer, and async fields

1. `dns-prefetch`#

Converting a domain name to an IP address is a time-consuming process. dns-prefetch allows the browser to do this when it is idle. This is especially useful for large websites that use multiple domains.

<link rel="dns-prefetch" href="//baidu.com" />

2. `prefetch`#

prefetch is generally used to preload resources that may be used. It is usually based on user behavior, and the browser will load the prefetch resources when it is idle.

<link rel="prefetch" href="http://www.baidu.com/" />

3. `preload`#

Unlike prefetch, which usually loads resources for the next page, preload loads resources such as scripts, styles, fonts, and images that are needed for the current page. Therefore, preload is not loaded when idle, but has a higher priority and consumes HTTP requests.

<link rel="preload" href="style.css" as="style" />

`as` values include#

script
style
image
media
document onload method is the callback function for when the resource is loaded

4. `preconnect`#

When the browser requests a resource from a server, it needs to establish a connection, and establishing a secure connection involves the following three steps:

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

The browser needs to communicate with the server for these three steps, and this back-and-forth request and response will inevitably take some time. When our site needs to request resources from another domain, we need to establish a connection with that domain first, and then we can start downloading the resources when needed. Comparing the normal request with the request when preconnect is configured, they have different behaviors on the request timeline. The following configuration can establish a connection with https://example.com in advance:

<link rel="preconnect" href="https://example.com">

By preconnecting to a third-party source, the loading time of resources can be reduced by 100ms to 500ms. Although this time may seem insignificant, it is a real optimization of page performance and improves user experience.

After establishing a connection with preconnect and another domain, it should be used as soon as possible, as the browser will close all unused connections within 10 seconds. Unnecessary preconnections will delay other important resources, so the number of preconnect connections should be limited.

5. `defer` and `async`#

//defer
<script defer src="script.js"></script>
//async
<script async src="script.js"></script>

defer and async are both used to asynchronously (in parallel) load resources. The difference is that async executes immediately after loading, while defer does not execute immediately after loading. Instead, it waits until all elements are parsed before executing, which is before the DOMContentLoaded event is triggered. Because async loads resources and executes them, it cannot guarantee the order, while defer executes scripts in order.