preface

As a front-end developer, the daily face is nothing more than HTML, CSS, JS these types of files. Parsing HTML files in a browser requires downloading CSS, JS, or images. How does the browser download and parse these files?

Does JS block DOM parsing? Will that block DOM rendering?

  1. script

    If the browser encounters a script tag that does not defer or async during parsing, the browser stops DOM parsing at this point, gets the current JS script by sending an HTTP request, and then has the JS engine execute the script content, return the result and continue parsing the DOM. The general process is as follows,

  2. script async

    If the browser encounters a script tag containing async during parsing, the browser will not block DOM parsing. After the JS script corresponding to the asynchronous request is downloaded, DOM parsing will be interrupted at this moment, and DOM parsing will continue after the JS script execution is complete. The diagram looks like this,

  3. script defer

    If the browser encounters a script tag containing defer during parsing, the browser will not block DOM parsing and asynchronously download the corresponding JS script and execute the JS script after DOM parsing is complete. The diagram looks like this,

Conclusion:

  • Empty tag script and containasyncThe script tag of the property blocks DOM parsing
  • containingdeferThe Script tag of the property does not block DOM parsing
  • Once you understand the parsing process, rendering becomes clear. Because a JAVASCRIPT script may contain a DOM operation, it must block DOM rendering

This explains why script is usually placed at the bottom of HTML text.

Does CSS block DOM parsing? Will that block DOM rendering?

Normally, CSS does not block DOM parsing. Because the DOM tree and the CSSOM tree are not interfering with each other during parsing, CSSOM does affect DOM rendering. DOM rendering can be blocked if CSS loads are blocked or parsing is too slow. Because DOM rendering is rendered by rendering trees, which are generated by combining DOM trees with CSSOM trees.

CSS can also block DOM parsing in special cases, as shown in the following HTML text.

< HTML > <head> <style type="text/ CSS "SRC =" index.css" /> </head> <body> <p>CSS style </p> <script> let e= document.getElementsByTagName('p')[0] e.style.color = 'blue' </script> </body> </html>Copy the code

When I access the style of the P element in JavaScript, I have to wait for the style to be downloaded before I can proceed, so CSS blocks DOM parsing in this case as well. Because JavaScript blocks DOM parsing, CSS blocks JavaScript scripting in the current case. So DOM parsing is temporarily blocked.

This is why most CSS files are inserted in the HEAD tag of HTML text so that the style file can be loaded and parsed at the same time as DOM parsing. The same is true for head via the style tag.

Does IMG block DOM parsing? Will that block DOM rendering?

First, we need to know about image loading and rendering timing:

  • Parse HTML — > build a DOM tree
  • Load styles — > Parse styles — > build a tree of style rules
  • Load JS script — > Execute script
  • Combine DOM tree and style rule tree to generate render tree
  • The layout process calculates the position of elements and lays them out
  • Start rendering the picture

As can be seen from the above, neither the background image nor the image loaded by IMG will block DOM parsing. It can be seen that DOM parsing does not care about image resources. However, in the painting process, image resources are needed, and if image resources are too slow to load, DOM rendering will be blocked. Also note the difference between lazy loading and this!