The preload attribute is different from prefetch

  • Preload tells the browser to load the resource immediately;
  • Prefetch tells the browser to start loading resources only when it is idle;
  • Preload and prefetch simply load resources and do not “execute”.
  • Preload and prefetch can be set and hit cache.
  • Using preload and prefetch correctly will not result in repeated requests;

Test the Demo

waynegongcn/preload-prefetch

priority

Modify index.html to the following:

<! DOCTYPEhtml>
<head>
  <link rel="preload" href="/style.css? t=2000" as="style">
  <link rel="preload" href="/main.js? t=2000" as="script">
  <link rel="prefetch" href="/prefetch.css? t=1000" as="style">
  <link rel="prefetch" href="/prefetch.js? t=1000" as="script">
</head>
<body>
  <p>hello world</p>
  <p class="preload">preload</p>
  <p class="prefetch">prefetch</p>
</body>
</html>
​
Copy the code

Localhost :3000: localhost:3000: localhost:3000: localhost:3000

JS is not output and CSS is not in effect. Resources loaded by preload and prefetch do not “execute” immediately.

Rendering is done before the resource is loaded, so loading the resource in either way does not block the critical render path;

Using preload sets the resource priority to Highest, while using Prefetch sets the resource priority to Lowest, and the Lowest resource will be loaded when the network is idle.

Preload has a higher priority than PreFETCH.

Terminate requests and caching

Modify index.html to the following:

<! DOCTYPEhtml>
<head>
  <link rel="preload" href="/preload.js? t=3000&ma=3600" as="script">
  <link rel="prefetch" href="/prefetch.js? t=3000&ma=3600" as="script">
</head>
<body>
  <p>hello world</p>
  <script>
    setTimeout(() = > {
      if (location.href.indexOf('r') = = = -1) {
        location.href = `http://localhost:3000? r=The ${Date.now()}`}},1000)
  </script>
</body>
</html>
​
Copy the code

The test results are as follows:

It can be found that when preload or prefetch is used to load resources, if a page jump occurs, the incomplete request will be cancelled.

Change the setTimeout parameter to 4000 and check the effect again:

If the resource cache is configured, loading the resource cache using preload or prefetch takes effect.

Repeated requests

To verify whether using preloaded attributes results in repeated network requests, modify index.html as follows:

<! DOCTYPEhtml>
<head>
  <link rel="preload" href="/main.js? t=3000" as="script">
  <link rel="prefetch" href="/main.js? t=3000" as="script">
</head>
<body>
  <p>hello world</p>
  <script src="/main.js? t=3000"></script>
</body>
</html>

Copy the code

When the actual resource used in the page is the same as the resource loaded by Preload or prefetch, the browser does not repeat the request (in this case, there is no third main.js request).

However, repeated use of preload and prefetch attributes for the same resource will lead to repeated downloads (main.js requests twice, and the second request that takes 6s is initiated by Prefetch).