The rel preprocessing class link
preprocessing class link tag allows us to control the browser and do these operations for some resources in advance to improve performance.List
link types:
- The dns-prefetch type link does a dns query for a domain name in advance, so the href in the link is actually only meaningful for the domain name
- preconnect link establishes a tcp link to a server in advance
- The prefetch type link takes the content of the url specified by href in advance
- The preload type link renders the url specified by href in advance
- The prerendner link renders the url specified by href in advance
preload
Some resources are needed immediately after the page is loaded. For such resources that are needed immediately, you may want to start acquiring them at the early stage of the page loading life cycle, and preload them before the browser's main rendering mechanism intervenes.
This mechanism allows resources to be loaded and available earlier, and is less likely to block the initial rendering of the page, thereby improving performance.
preload basic example
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="main.js"></script>
</body>
preload uses as to specify the type of preloaded content, which will enable the browser to
- Optimize resource loading priority more precisely
- Match future loading requirements and reuse the same resource under appropriate circumstances
- Apply the correct content security policy for resources
- Set the correct Accept request header for the resource
as optional parameters
- audio: audio file
- document: An HTML document that will be embedded in <frame> or <iframe>
- embed: a resource that will be embedded inside the <embed> element
- fetch: Those resources that will be obtained through fetch and XHR requests, such as an ArrayBuffer or JSON file
- font: font file
- image: Picture file
- object: a file that will be embedded in the <embed> element
- script: JavaScript file
- style: style sheet
- track: WebVTT file
- worker: A JavaScript web worker or shared worker
- video: video file
DNS prefetch
DNS prefetching informs the client that related resources will be used in the future by specifying a specific URL, so that the browser can resolve DNS as soon as possible. For example, we need a picture or video file on example.com. It can be written like this in <head>:
| 1 |
<linkrel="dns-prefetch"href="//example.com"> |
Prefetch
When it is determined that a web page will definitely use a certain resource in the future, the developer can ask the browser to request it in advance and cache it for subsequent use. prefetch supports pre-fetching pictures, scripts or any resources that can be cached by the browser.
| 1 |
<linkrel="prefetch"href="image.png"> |