This is the 11th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

The answer to parse

It doesn’t necessarily block; If the page uses external linked scripts, you can defer js execution or execute the script asynchronously using the extended defer or Async properties of the script tag; But inline scripts, or plain script tags that don’t use delayed or asynchronous attribute tags, can still block. Because when a browser parses an HTML file, it builds a DOM tree by parsing it from the top down. DOM building is paused when script tags are parsed. The script will be loaded and executed before continuing to parse. \

Extended properties of the script tag: defer, async

defer

It delays the execution of JS, and when the page parses to a script tag, it downloads first, but does not execute, so it does not block other processes. Such files can be downloaded in parallel with other resources on the page.

async

This is a new property in H5 that specifies that scripts can be executed asynchronously;

The difference between defer and Async

Defer is downloaded first and then executed sequentially; Async is an asynchronous loading execution when the page is parsed. The execution order of multiple files cannot be guaranteed. The one who finishes loading first will be executed first. This big guy’s doing great can go to see github.com/waiter/Scri…

Browser rendering process

So just to be brief, there are four steps

  1. Building an object Model (DOM, CSSOM)

After the browser obtains the HTML page, it first traverses the document node to generate the DOM tree. Through the DOM tree and CSS rule tree, to build the Render tree. The browser iterates through each visible node, starting at the root of the DOM tree, and then finds the appropriate CSS style rule for each visible node and applies 3. After the layout rendering tree is generated, the browser already knows which nodes are in the page, the CSS definition of each node, and their dependencies, to calculate each node’s position on the screen. 4. Draw Draw the entire page based on the calculated information