web123456

js blocking dom construction && CSS blocking DOM construction && async, defer

js blocking dom construction && CSS blocking DOM construction through js

  • JavaScriptSince scripts may modify the DOM, they will block the DOM construction. We all know that CSS will not operate or change the DOM. Therefore, we usually believe that CSS will not affect the DOM construction, but will only affect subsequent layout, drawing and other processes, that is, it will affect the rendering of the DOM. But in fact, CSS can block the construction of DOM through JavaScript.
    Because JavaScript can change styles, that is, it has the ability to modify the CSS rule tree, and whether there are operations to change styles in JavaScript scripts is agnostic before executing JavaScript. Therefore, in order to ensure the correct execution of JavaScript scripts, the CSS rule tree must be prepared first before executing JavaScript (or what if there is any operation to modify CSS).
    In other words, if there is a JavaScript script blocking the DOM construction in the middle of the construction of the DOM, and this page also contains references to the external CSS file, then you need to wait for the current CSS rule tree (based on the part of the DOM tree that has been generated currently) to start the execution of the JavaScript script, and then continue to build the DOM when everything is over.

  • UI threads and JS threads are mutually exclusive because the results of JS running will affect the results of UI threads. When the JS thread runs, the UI thread is in a frozen state. (Now the browser may have made special processing on certain events, such as listening to scroll events, and still being able to play animations smoothly when scrolling).

DOM and CSS
  • Ideally without js, html and css will be parsed in parallel, generating DOM and CSSOM respectively.
  1. The loading of css will not block the DOM parsing (can be blocked through js)
  2. The loading of css blocks the rendering of the DOM
DOM and JS
  1. JS loading and execution block DOM parsing
  2. JS loading and execution block DOM rendering

Asynchronously loading JavaScript scripts

<script src="path/to/" defer></script>
<script src="path/to/" async></script>
 <!-- defer is "the page DOM is parsed and then executed", async is "the js script is executed after downloading" -->
  • 1
  • 2
  • 3
  • Similarities:
  1. All are only used in external scripts
  2. All js files will be downloaded asynchronously immediately
  3. All have compatibility issues
  • Differences:
  1. After the DOM parsing is completed, defer executes scripts before DOMContentLs:oaded, and executes them in the order in which the script tag appears (some versions of browsers do not execute in sequence). Therefore, defer is suitable for scripts related to dom and is also suitable for executing scripts with dependencies.
  2. async is executed immediately after the script is downloaded, so the order of script execution is not certain (whoever downloads first executes first), and it may block the DOM parsing. Therefore, async is suitable for third-party scripts and does not operate dom
  • tips: If compatibility is considered, it is best to put script tags at the end of the body
Browser loads ES6 modules
  • Use type = ‘module’
  • It is asynchronous loading, which is equivalent to opening the defer attribute
<script type="module" src="./"></script>
  • 1
Supplement the call timing of DOMContentLoaded and load:

1. Parsing HTML structure.
2. The DOM tree construction is completed. //DOMContentLoaded
3. Load external scripts and stylesheet files.
4. Parses and executes the script code.
5. Load external files such as pictures.
6. The page has been loaded. //load
In step 2, the DOMContentLoaded event will be triggered. In step 6, trigger the load event.