CSS and JS block two or three things

Have a holiday, I wish you a happy Spring Festival, no object are blind date success, there are also blind date success ~

Browser Rendering steps

Page rendering process:

1. Parse HTML into a DOM Tree and CSS into a CSSOM Tree
2. Merge DOM Tree and CSSOM Tree into Render Tree
3. Generate the Layout and calculate the size and position of the elements in the Render Tree
4. Render Tree is drawn as pixels and finally displayed on the screen

The above process is done by the GUI rendering thread.

Browser kernel (renderer)

There are several processes in the browser, among which the rendering process is called the browser kernel, which is responsible for page rendering and JS script execution. The renderer process is responsible for browser parsing and rendering. There are JS engine threads, GUI rendering threads, event loop management threads, timer threads, AND HTTP threads.

The JS engine thread is responsible for executing THE JS script, while the GUI rendering thread is responsible for parsing and rendering the page. The two are mutually exclusive, that is, the page stops parsing and rendering during the JS execution. This is because if the JS engine makes changes to page elements while rendering the page, such as clearing the page, it will make subsequent page rendering unnecessary and incorrect. Because JS often operates DOM, it involves the communication between JS engine threads and GUI rendering threads, and the communication between threads is very expensive, which is also the reason why JS operates DOM inefficiently.

Parsing, rendering, and blocking

This example needs to be tested with the console switched to weaknet and unbuffered mode:

The browser’s HTML/CSS parsing and rendering belong to the GUI rendering thread, so it is mutually exclusive and blocked with the JS engine thread. Here’s a look at the order in which the browser parses and renders, and the blocking relationship between them, in terms of how the code actually runs:

The CSS block

1. Downloading and parsing CSS files does not affect DOM parsing, but blocks DOM rendering. Because CSSOM Tree and DOM Tree need to synthesize the Render Tree to draw the page. The following test1 is the default style until CSS has been downloaded and parsed, test2 will not be displayed until CSS has been downloaded and parsed:

<button class="btn btn-primary">test1</button>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div>test2</div>
Copy the code

2. Before the CSS file is downloaded and parsed, subsequent JS scripts cannot be executed. The followingalert('ok')It will not pop up until the CSS is downloaded and parsed:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script>
    alert('ok')
</script>
Copy the code

3. Downloading the CSS file does not block previous JS script execution. The followingalert('ok')Will pop up before the CSS download is complete:

<script>
    alert('ok')
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
Copy the code

So when you need to execute the JS that doesn’t manipulate DOM elements in advance, you can put the JS in front of the CSS file.

Js blocked

Downloading and parsing of JS files blocks the GUI rendering process, i.e. DOM and CSS parsing and rendering.

1. Subsequent HTML and CSS cannot be parsed until the js file is downloaded and parsed:

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <div>test</div>
Copy the code

2. Download js files without blocking previous HTML and CSS parsing:

    <div>test</div>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
Copy the code

Points to be aware of

First, the GUI rendering thread will Render the content to the screen as early as possible. Rather than waiting for all the HTML to be parsed before building and laying out the Render Tree, it will display some of the content after parsing some of the content, possibly while downloading the rest of the content over the network. Test1 will render before the js file is downloaded, while test2 will render after the js file is downloaded and executed:

  <div>test1</div>
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <div>test2</div>
Copy the code

Second, the download of files will not be blocked, whether CSS or JS files, the main thread of the browser will open the download before the page is parsed, so even if the script is deleted before the external script is executed, the script will still download.

<body>
  <script>
    document.body.remove()
  </script>  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</body>
Copy the code

conclusion

In short, downloading either the JS file or the CSS file will block the rendering of the next page, but not the previous one, as we expect coding logic.