As we all know, when an HTML page is loading, if a script tag is encountered, it is common to stop rendering the page, load and execute the script, and wait until the script is finished rendering the page. But there are ways to lazily load JS, and these methods help speed up page loading

1. The defer attribute

role

The script is downloaded immediately, but not run until the page is loaded

use

<script type="text/javascript" src="demo_defer.js" defer="defer"></script>
Copy the code

There will be a concrete example later, which will be put in the defer and Async comparison section

Pay attention to

The defer attribute applies only to external script files, where the SRC attribute is used

2. The async attributes

role

Prevent the page from waiting for scripts to download and execute, thus asynchronously loading the rest of the page

use

<script type="text/javascript" src="demo_async.js" async="async"></script>
Copy the code

There will be a concrete example later, which will be put in the defer and Async comparison section

Pay attention to

Asynchronous scripts must execute the async property before the page load event only for external scripts

3. Compare defer with Async

A picture is worth a thousand words

The same

The document. Write method (which is used to write HTML expressions or JS code to the document) cannot be called in scripts that load files without blocking the page rendering is executed before the onload event

The difference between

In HTML version html4.0, the scripts that defined defer and async async properties in HTML5.0 were executed immediately after the download (the page rendering was not blocked during the download), but the execution order could not be controlled. The scripts that downloaded first and executed defer properties were all executed after the HTML parsing was completed. Do it in the original order

Use a combination of

If async is true, the script will execute asynchronously after the download. If async is false and defer is true, the script will execute after the page is parsed. If async and defer are both false, the script will stop the page parsing during the page parsing, download and execute immediately

The instance

You start with an outline. Js file for external loading and a demo.html file

//outline.js console.log("this is outline.js")Copy the code
<! <script type="text/javascript"> window.onload=function(){console.log("onload event"); } </script> <script type="text/javascript" src="./outline.js" defer="defer"></script> <script type="text/javascript"> console.log("normol script"); </script>Copy the code

The current output in the console is

Now add the defer attribute to the second script tag, with the three script tags in the same order

<script type="text/javascript" src="./outline.js" defer="defer"></script>
Copy the code

The result of the execution is

Change the second tag to async, and the three script tags remain in the same order. If we use document.write in outline

document.write("hello")
console.log("this is outline.js")
Copy the code

willIt does not block outline. Js to continue loading execution

4. Dynamically create the DOM

The basic principle of

Create a new script tag with document.createElement(“script”) to assign a value to the SRC attribute of the newly created element. The value is the address of the JS file that needs to be loaded to add the new element to the body

The instance

function download() {  
      var element = document.createElement("script");  
      element.src = "outline.js";  
      document.body.appendChild(element);  
}  
Copy the code

The above code is triggered by an event to implement JS lazy loading

JQuery getScript() method

usage

$.getscript (" outlie.js ",function(){console.log(" script loaded ")});Copy the code