Defer: The script file will be downloaded as soon as it is encountered while rendering the page. The download process is asynchronous and script.js will be executed after all elements have been parsed and before the DOMContentLoaded event is triggered

async: Page rendering and encounter will immediately download the script file, download process is asynchronous, will automatically perform after the download is complete, when he was performing clog the dom parsing, but his execution time, not necessarily likely before DTL events, may also, but must be before the load event, so the async cannot guarantee the execution order of js file

dns-prefetch:  

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

Domain name resolution is carried out in advance. For taobao, its webpage references a large number of resources of other domain names, which is suitable for this property. If all resources of the website are basically under this domain name, this property has no effect. Because Chrome caches for you as it visits your site.

Preload:

<link rel="preload" href="/main.js" as="script">Copy the code

The browser will immediately start downloading main.js(asynchronously loaded) as soon as it encounters the link tag above and place it in memory, but will not execute. The browser will only execute the preloaded JS if the script tag is also loaded with main.js. If the JS file is still not downloaded at this point, the browser does not reissue the request and waits for the file to load. Not only JS files, fonts, images, and other resources can use this property, but remember to use the as property to indicate the resource type, otherwise this setting will not work

Prefetch:

<link href="main.js" rel="prefetch">Copy the code

The browser downloads main.js when it is idle and reads it directly from the cache when the page is in use. You leave it up to the browser to decide if and when to load the resource. If the browser finds that the script tag references the same resource while Prefetch is still loaded, the browser will request it again. This will cause two loads, so do not use Prefetch for the resource that the current page will use immediately. Use preload instead.



Preload preloading technology

Github.com/lanjingling…