If a picture were used to illustrate the characteristics of script loading, it would look something like this:

Combined with the picture, we can summarize the characteristics of the three ways as follows:

We can test this conclusion with a small project.

index.html:

<! DOCTYPEhtml>
<html lang="en">

<head>
  <script>
    console.time('timer');
    console.timeLog('timer'.'--- Start parsing HTML');
    document.addEventListener('DOMContentLoaded'.function () {
      console.timeLog('timer'.'--- Document loaded');
    });
  </script>
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
    obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
  </p>
  <! Omit 500 lines of repeated elements -->
  <script>console.timeLog('timer'.'--- Start loading 1.js')</script>
  <script src='./1.js'></script>
  <script>console.timeLog('timer'.'--- Start loading 2.js')</script>
  <script src='./2.js'></script>
  <script>console.timeLog('timer'.'--- Start loading 3.js')</script>
  <script src='./3.js'></script>
  <! Omit 1500 lines of repeated elements -->
   <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
    obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
  </p>
  <script>
    console.timeLog('timer'.'--- End parsing HTML')
  </script>
</body>

</html>
Copy the code

1.js:

const text1 = '// Very long text'

text1.split(' ');
console.timeLog('timer'.'--- 1.js excuted');
Copy the code

2.js:

const text2 = '// Very long text'

text2.split(' ');
console.timeLog('timer'.'--- 2.js excuted');
Copy the code

1.js:

const text3 = '// Very long text'

text3.split(' ');
console.timeLog('timer'.'--- 3.js excuted');
Copy the code

We load 1.js, 2.js, and 3.js in normal, async, and defer modes respectively, and observe the printed results of the console:

General:

Conclusion: The appearance of script interrupts HTML loading, and scripts are loaded and executed sequentially, and HTML is parsed after all scripts are executed.

Async:

Conclusion: HTML parsing and script downloading are synchronized, script execution interrupts HTML parsing. Script execution order and tag occurrence order are not necessarily the same; Script might be executed after document loaded.

Defer:

Conclusion: HTML parsing and script downloading are synchronized. Script is executed after HTML parsing and before document loaded, in the same order as tags appear.

From the above experiments, it is usually recommended to place script at the end of in the normal way, so as not to block HTML parsing and slow web page opening. Defer has the advantage over Async in that it does not block HTML parsing and scripts are executed in a predictable order. Some scripts that need to be downloaded for execution can be referred to in as defer.

The code of this article is github.com/MudOnTire/s…