In the labeldns-prefetch,prefetch,preload,defer,asyncThe difference between

1.dns-prefetch

Converting a domain name to an IP is a time-consuming process, and dnS-Prefetch lets your browser do it for you when it’s idle. In particular, large websites use multiple domain names, which requires DNS prefetch.

<link rel="dns-prefetch" href="//m.baidu.com">
Copy the code

2,prefetch

Prefetch is generally used to preload resources that may be used. It is a judgment of user behavior. The browser will load prefetch resources when it is idle.

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

3,preload

Unlike Prefetch, a prefecture-oriented th usually loads resources for a page that may be used next, while Preload is a resource for a script, style, font, image or other resources that are used to load the current page. So instead of loading at idle, preload has a higher priority and consumes HTTP requests.

<link rel='preload' href='style.css' as="style" onload="console.log('style loaded')"
Copy the code

asValue including

  • script
  • style
  • image
  • media
  • document onloadMethod is a callback function after the resource has been loaded

4,defer 和 async

//defer
<script defer src="script.js"></script>
//async
<script async src="script.js"></script>
Copy the code

Both defer and Async load resources asynchronously (in parallel). The difference is that async executes immediately after loading, while defer does not execute until all elements are parsed, that is, before the DOMContentLoaded event is triggered. Since async loads resources after they are loaded and executed, it does not guarantee order, and defer executes the scripts in order.