I saw in a code snippet of a website a definition something like this:
<link rel="preload" href="caminho/para/o/script.js" as="script">
I've never seen this code before.
I'd like to know: What does this rel="preload" mean? Is it some HTML5 specification?
From documentation
The preload value in the rel= attribute of the <link> element allows you to write declarative search requests in your <head> , specifying features that your pages will need very soon after loading, which you want to start the preload at the beginning of the page load lifecycle, before the browser's main rendering engine goes live.
This ensures that they are available sooner and are less likely to block the first rendering of the page, leading to performance improvements.
You would normally use something like this:
<link rel="stylesheet" href="styles/main.css">
Here, however, we'll use a rel value of preload , which turns the <link> element into a preloader for almost any resource we want:
<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>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js"></script>
</body>
Here we are preloading our CSS and JavaScript files so they are available as soon as they are needed while rendering the page later. This example is somewhat trivial, but the benefits can be seen more clearly, later on rendering features are discovered and larger are.
Features pointed to within a CSS file, such as fonts or images, or larger images and even video files can have benefits also if added with the preload attribute, with the following possible benefits:
Accept header headers for him. rel="preload" ? With the as="..." attribute you can define the following types of documents.
as="audio" : audio file as="video" : video file. as="document" : HTML document intended to be embedded within a <frame> or <iframe> . as="fetch" : resource to be accessed by a search request or XmlHttpRequest (or fetch ), as a ArrayBuffer or JSON file. as="font" : source file. as="image" : image file. as="script" : JavaScript file. as="style" : style files. as="track" : WebVTT file. as="worker" : A JavaScript Worker or shared worker. as="embed" and as="object" : resource to be embedded within a <embed element > or <object >. If you preload some feature such as:
<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
<link rel="preload" href="style.css" as="style">
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="main.js"></script>
</body>
But do not use it probably the browser console will send a message similar to this:
The resource http://site/preload.css was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
Note that using <link rel="preload" href="style.css" as="style"> will only preload CSS and prioritize (as you set priority), it will not stylize the document for you, you still need to call the:
<link rel="stylesheet" href="style.css">
To begin with we need to understand what rel is, it allows you to specify and pre-load resources that your page will need before the browser's main rendering is commonly used for files CSS
<link rel="stylesheet" href="estilo.css">
Using rel="preload" you can specify any resource to be preloaded, such as JS
<link rel="preload" href="funcao.js" as="script">
You can still use as to specify the type of resource to load.
The main benefit of this preload is that these features will be available before page rendering.