This is the fifth day of my participation in Gwen Challenge

About the <script> tag

It is well known that the 

<! DOCTYPEhtml>
<html>
<head>
  <title>Example HTML Page</title>
  <! Inline script -->
  <script>
    alert('Hello World! ');
  </script>
  <! -- External script -->
  <script src="file.js">
    alert(1); // This content is ignored because SRC is set
  </script>
</head>
<body>
  <! -- Page content -->
</body>
</html>
Copy the code

The loading order of <script> tags

In the previous code, we put

To improve the user experience and make the page load faster, we usually place the 

<! DOCTYPEhtml>
<html>
<head>
  <title>Example HTML Page</title>
</head>
<body>
  <! -- Page content -->
  <script>
    alert('Hello World! ');
  </script>
  <script src="file.js"></script>
</body>
</html>
Copy the code

This way, the browser loads and executes the JavaScript code after the page has been rendered, making the page feel faster to the user. Is there a way to put the

The 

<! DOCTYPEhtml>
<html>
<head>
  <title>Example HTML Page</title>
  <script defer src="exampleOne.js" ></script>
  <script defer src="exampleTwo.js" ></script>
</head>
<body>
  <! -- Page content -->
  <! Exampltwo-js = exampltwo-js = exampltwo-js = exampltwo-js
</body>
</html>
Copy the code

Now we know that the download and execution of the JavaScript code placed in blocks the page rendering, while the

What if we want to introduce external JavaScript that will continue rendering the page while downloading, and stop rendering the page after downloading to execute the JavaScript code?

Here we learn about another property of the

The difference with defer is that when the script file is downloaded, the browser immediately stops the page rendering and executes the JavaScript code. If there are more than one async 

<! DOCTYPEhtml>
<html>
<head>
  <title>Example HTML Page</title>
  <script async src="exampleOne.js" ></script>
  <script async src="exampleTwo.js" ></script>
</head>
<body>
  <! -- Page content -->
  <! -- Stop the page rendering process to execute the JS code, the order of execution is not necessarily -->
</body>
</html>
Copy the code

Module script loading sequence

After the introduction of the module specification in ES6, the 

<script type="module">
  // Module code
</script>
<! -- Import external module code -->
<script type = "module" src="module.js"></script>
Copy the code

The loading rules for the module script are the same as those for

What happens if you add async to your module script?

Module scripts with async properties are loaded in the same way as normal asynchronous scripts, that is, when the HTML is parsed to the

Also, as mentioned above the async property only applies to external scripts, as opposed to non-modular scripts. For module scripts, the async property also applies to inline scripts.

<! -- All dependencies are retrieved (analytics. Js) and the script starts running -->
<! -- Don't wait for HTML documents or other <script> tags -->
<script async type="module">
  import {counter} from './analytics.js';
  counter.count();
</script>
Copy the code

conclusion

Here is a brief summary of this article:

  1. <script>blocksHTMLAnalysis, usually placed in<body>The end of the content;
  2. You can usedeferProperty loads external scripts ahead of time, but deferred execution until after the document has been parsed, in the same order as the tags;
  3. You can useasyncProperty does not block page parsing during the loading of external scripts. After the loading is complete, page parsing is stopped and the code is executed. The execution order depends on the loading order.
  4. The loading execution sequence of the module script and<script defer>Consistent;
  5. asyncProperty applies to inline module scripts.

Ask questions

If a script is created dynamically, what is the order in which it is loaded?

let script = document.createElement('script');
script.src = "example.js";
document.body.append(script); 
Copy the code