Read some similar articles, there are such a number of statements: parsing HTML, DOM parsing and so on; Once the HTML file is downloaded, the browser parses the HTML for the purpose of building a DOM structure or generating a DOM tree.

Inline scripts

<html>
  <head></head>
  <body>
    <script>
      console.log('irene')
    </script>
  </body>
</html>
Copy the code

Parsing an inline script pauses while parsing HTML, executes scripts first, and then continues parsing HTML.

Common external scripts

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

Normal external scripts encountered during HTML parsing pause parsing, send a request and execute scripts, and then continue parsing the HTML. As shown below, green indicates HTML parsing; Gray indicates that HTML parsing is paused; Blue means scripts download; Pink indicates scripts execution.

defer scripts

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

Defer scripts will not stop parsing while parsing THE HTML and will be downloaded in parallel. Wait until the entire HTML is parsed and run in the order referenced to scripts. Defer scripts executes before the DOMContentLoaded event is triggered. The defer attribute can only be used for external scripts.

The browser downloads multiple files in paralleldefer scriptsScripts with small files will most likely finish downloading first. In addition to telling the browser not to block HTML parsing, the defer attribute also ensures the relative order of defer scripts. Even if small.js is downloaded first, it still has to wait for long.js to be executed.

async scripts

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

HTML parsing async scripts will not stop parsing, scripts will also be downloaded in parallel; Scripts are downloaded and executed, blocking HTML parsing. The order in which async scripts are executed may not be the same as the order in which they are referenced. Async scripts may be executed before or after the DOMContentLoaded event is triggered. If the HTML has parsed async scripts before the download is complete, then the DOMContentLoaded event is triggered and Async Scripts may not be able to listen for the DOMContentLoaded event. The async property can only be used to externalize scripts.

The browser downloads multiple files in parallelasync scriptsScripts with small files are likely to be downloaded first and executed first, so they are not guaranteed to be pressedasync scriptsThe sequence of references is executed.

defer VS async

In practice, defer is used for scripts that require the entire DOM or whose relative execution order is important. Async is used for stand-alone scripts, such as counters or ads, and their relative execution order is not important.

dynamic scripts

let script = document.createElement('script');
script.src = "/article/script-async-defer/long.js";
document.body.append(script);
Copy the code

Scripts are downloaded as soon as they are appended to the document. Dynamic scripts by default behave like Async scripts, that is, they are downloaded first and executed first. You can display script.async = false so that scripts are executed in the same order as deferred scripts.

reference

How does the browser parse HTML

script-async-defer-dynamic

Defer scripts will block HTML parsing. Defer scripts will not block HTML parsing. The idea is the same: defer scripts is downloaded without blocking HTML parsing and executed after DOM is built; There are two different statements because text 1 defines the criteria for blocking HTML parsing: executing before DOMContentLoaded blocks HTML parsing, or not; Defer scripts was executed after the DOM was built and before DOMContentLoaded, and everyone thought that defer scripts would block HTML parsing. It is easy to understand that defer scripts does not block HTML parsing.

javascript-async-defer

Screenshot from this article