HTML - preloading

> (World Wide) Web - (W3|WWW) > HyperText markup Language (HTML)

1 - Preload

the browser will preload the JavaScript file, but not actually use it yet.

The preload value of the <link> element's rel attribute allows you to:

This ensures that they are made available earlier and are less likely to block the page's first render

as specify the type of content to be preloaded allows the browser to:

  • Prioritize resource loading more accurately.
  • Match future requests, reusing the same resource if appropriate.
  • Apply the correct content security policy to the resource.
  • Set the correct Accept request headers for it.

Example:

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
  • Responsive Preloading
<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
  • Full
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS preload example</title>
 
    <link rel="preload" href="main.js" as="script">
 
  </head>
 
  <body>
    <h1>What ever</h1>
 
 
    <script src="main.js"></script>
  </body>
</html>

2 - Javascript

To defer script execution until exactly you need it.

Example:

var preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
  • using it
var preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);
Advertising

3 - Documentation / Reference

web/html/script_load.txt · Last modified: 2019/03/17 16:34 by gerardnico