Will css loading cause blocking? ?

Preface

I was asked this question in an interview a few days ago. I wasn’t sure about the answer at the time, haha, although I still passed the interview.

Now let’s analyze this and summarize it so that you can answer it confidently when you meet next time, 666

Preparation

In order to complete this test, let’s first learn about how to use chrome to set the download speed.

Open the chrome console (press F12), you can see the picture below, the focus is on the place where I drew the red circle
In this way, the upper limit of the download speed of our resources will be limited to 20kb/s. Okay, then let’s get to the point.

Will css loading block the parsing & rendering of the DOM tree?

Test code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css阻塞</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      h1 {
      
      
        color: red !important
      }
    </style>
    <script>
      function h () {
      
      
        console.log(document.querySelectorAll('h1'))
      }
      setTimeout(h, 0)
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
  </head>
  
  <body>
    <h1>这是红色的</h1>
  </body>
</html>

Hypothesis: css loading blocks DOM tree parsing and rendering

Assumption result: Before bootstrap.css is loaded, the following content will not be parsed and rendered, so what we see at the beginning should be a white screen, and h1 will not be displayed. And the result of console.log should be an empty array at this time.

Actual result: as shown below
Insert image description here
Will css block DOM tree parsing?
From the picture above, we can see that when the css has not been loaded, h1 is not displayed, but the console output is as follows:

You can get You know, at this time the DOM tree has at least been parsed to h1, but the css has not been loaded yet.
That means, css并不会阻塞DOM树的解析.

Will css loading block DOM tree rendering?

From the above picture, we can also see that when the css has not been loaded, the page displays a white screen, and the red font is not displayed until the css is loaded.
In other words, although the following content is parsed, it is not rendered.
So, css加载会阻塞DOM树渲染.

In fact, I think this may also be an optimization mechanism of the browser. Because when you load css, you may modify the style of the DOM node below. If the css loading does not block the rendering of the DOM tree, then after the css is loaded, the DOM tree may have to be redrawn or reflowed, which causes some problems. There is no necessary loss. So I simply parse the structure of the DOM tree first, complete the work that can be done, and then wait for your css to be loaded, and then render the DOM tree according to the final style. This approach will indeed be better in terms of performance. .

Will css loading block js execution?

test code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css阻塞</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
      console.log('before css')
      var startDate = new Date()
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
    <h1>这是红色的</h1>
    <script>
      var endDate = new Date()
      console.log('after css')
      console.log('经过了' + (endDate -startDate) + 'ms')
    </script>
  </body>
</html>

Hypothesis: css loading will block subsequent js execution

Expected results: The js code behind the link should not be run until the css is loaded.

Actual result:
Insert image description here

From the above figure we can see that the js code before the css loading statement was executed first, but the code after the css loading statement was not executed for a long time. , it is not executed until the css is loaded.
This also explains, css加载会阻塞后面的js语句的执行.

in conclusion

CSS loading [will not] block the parsing of the DOM structure
CSS loading [will] block the rendering of the DOM structure
CSS loading [will] block the execution of subsequent js statements

Browser rendering process

Parses css files and html files to form CSSOM Tree and DOM Tree respectively.The two run in parallel and will not affect each other
Merge the parsed CSSOM Tree and DOM Tree to form the render tree render Tree
Render the merged render tree to the page
The rendering of css files and html files is parallel, so it will not block the parsing of the DOM structure, but it will block subsequent page rendering.
The JS statements in the code may operate the previous DOM structure to cause redrawing and rearrangement. Therefore, when the browser renders, the execution of the js statement will be placed after the css execution is completed, so the loading of css will also cause the execution of the js statement.

In actual development, sometimes due to the slow loading of css, there is a long white screen when entering the page
Solution:

Compress, such as using webpack, gulp and other tools to compress css files
Reduce the number of requests, merge multiple css files, or write inline styles (writing inline is not recommended, as it is inconvenient for subsequent modifications and code reading)
Use CDN to import (cdn import will select the nearest node with cached content to provide resources based on the current network)

DOMContentLoaded
The DOMContentLoaded event will be triggered only after the css loading is completed. Therefore, we can conclude:

If there are both css and js in the page, and there is js behind the css, the DOMContentLoaded event will not be executed until the css is loaded.
Under other circumstances, DOMContentLoaded will not wait for css to be loaded, and the DOMContentLoaded event will not wait for other resources such as images and videos to be loaded.