Will css loading cause blocking?

Will css loading cause blocking?

Maybe everyone knows that js execution will block the parsing and rendering of the DOM tree, so will CSS loading block the parsing and rendering of the DOM tree? Next, I will test the impact of CSS loading on the parsing and rendering of the DOM tree.

In order to complete this test, let's first learn how to use Chrome to set the download speed

\1. Open the Chrome console (press F12), you can see the following picture, the focus is where I draw the red circle

Click on the red circle (No throttling) and you will see the following picture. We select the GPRS option.

\2. Click on the red circle (No throttling), and you will see the following picture. We select the GPRS option

In this way, our download speed limit for resources will be limited to 20kb/s. OK, let's get to the point.

3. In this way, the upper limit of our resource download speed will be limited to 20kb/s. OK, let's get to the point.

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

Let's talk code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css blocking</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>This is red</h1>
  </body>
</html>

Assumption: CSS loading will block DOM tree parsing and rendering

Assumption: Before bootstrap.css is loaded, the following content will not be parsed and rendered, so what we see at first 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

Will css block DOM tree parsing?

From the above figure we can see that when css has not been loaded, h1 is not displayed, but the console output is as follows

It can be seen that at this time the DOM tree has at least been parsed to h1, but the CSS has not been loaded yet, which means that the CSS will not block the parsing of the DOM tree.

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. The red font is not displayed until the CSS is loaded. In other words, although the following content is parsed, it is not rendered. Therefore, css loading will block DOM tree rendering.

My personal evaluation of this mechanism

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 following DOM nodes. If the CSS loading does not block the DOM tree rendering, then after the CSS is loaded, the DOM tree may have to be redrawn or reflowed, which causes some unnecessary losses. So I simply parse the structure of the DOM tree first, do the work that can be done, and then after your CSS is loaded, render the DOM tree according to the final style. This approach will indeed be better in terms of performance.

Will css loading block js running?

From the above inference, we can conclude that CSS loading will not block DOM tree parsing, but will block DOM tree rendering. So, will css loading block js execution?

Again, verify this through code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css blocking</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>This is red</h1>
    <script>
      var endDate = new Date()
      console.log('after css')
      console.log('time passed' + (endDate - startDate) + 'ms')
    </script>
  </body>
</html>

Assumption: CSS loading will block the subsequent JS running

Expected result: The js code after the link should be executed after the css is loaded.

Actual Result:

From the above figure we can see that the js code before the css loading statement is executed first, but the code after the css loading statement is not executed until the css is loaded. This also shows that CSS loading will block the execution of subsequent JS statements. See the following figure for detailed results (css loading took 5600+ms):

in conclusion

From the above, we can draw the following conclusions:

  • CSS loading will not block the parsing of the DOM tree
  • CSS loading will block the rendering of the DOM tree
  • CSS loading will block the execution of subsequent JS statements.

Therefore, in order to avoid users seeing a long white screen time, we should increase the CSS loading speed as much as possible, such as using the following methods:

  • Use CDN (because CDN will select the nearest node with cached content to provide you with resources based on your network conditions, thus reducing loading time)
  • Compress CSS (you can use many packaging tools, such as webpack, gulp, etc., or you can turn on gzip compression)
  • Use cache properly (setting cache-control, expires, and E-tag are all good, but be aware that after the file is updated, you need to avoid the impact of cache. One solution is to add a version number after the file name)
  • Reduce the number of http requests, merge multiple CSS files, or simply write them inline (one disadvantage of inline styles is that they cannot be cached)

Principle Analysis

So why does the above phenomenon occur? Let's analyze it from the browser's rendering process.

Different browsers use different kernels, so their rendering processes are also different. There are currently two main ones:

WebKit rendering process

Gecko rendering process

From the two flowcharts above, we can see that the browser rendering process is as follows:

Parse HTML files to generate DOM Tree, parse CSS files to generate CSSOM Tree. Combine Dom Tree and CSSOM Tree to generate Render Tree. Render and draw according to Render Tree and render pixels to the screen.

From the process we can see

  1. DOM parsing and CSS parsing are two parallel processes, so this also explains why CSS loading does not block DOM parsing.
  2. However, since Render Tree depends on DOM Tree and CSSOM Tree, it must wait until CSSOM Tree is built, that is, CSS resources are loaded (or CSS resources fail to load) before it can start rendering. Therefore, CSS loading will block Dom rendering.
  3. Since js may operate previous Dom nodes and css styles, the browser will maintain the order of css and js in html. Therefore, the style sheet will be loaded and executed before the subsequent js is executed. So css will block the execution of subsequent js.

DOMContentLoaded

For browsers, there are two main events for page loading, one is DOMContentLoaded and the other is onLoad. There is nothing much to say about onLoad. It will only be triggered after all resources of the page are loaded. These resources include css, js, pictures, videos, etc.

DOMContentLoaded, as the name implies, is triggered when the content of the page is parsed. Well, as we discussed above, css will block Dom rendering and js execution, and js will block Dom parsing. Then we can make the assumption that

  1. When only CSS exists on the page, or JS is placed before CSS, DomContentLoaded does not need to wait until CSS is loaded.
  2. When there are both CSS and JS in the page, and JS is behind CSS, DomContentLoaded must wait until both CSS and JS are loaded before it is triggered.

Let's test the first case first:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css blocking</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        console.log('DOMContentLoaded');
      })
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
  </head>
  <body>
  </body>
</html>

The experimental results are shown in the figure below:

From the animated picture, we can see that the DOMContentLoaded event has been triggered before the css is loaded. Because there is no js code behind the css.

Next, we will test the second case. It is very simple. Just add a line of code after the css.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>css blocking</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        console.log('DOMContentLoaded');
      })
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
​
    <script>
      console.log('Is it my turn yet?');
    </script>
  </head>
  <body>
  </body>
</html>

We can see that the DOMContentLoaded event is triggered only after the css loading is complete. Therefore, we can conclude that:

If there are both css and js in the page, and js is behind css, the DOMContentLoaded event will be executed after css is loaded. In other cases, DOMContentLoaded will not wait for CSS to load, and the DOMContentLoaded event will not wait for other resources such as pictures and videos to load.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  How to use the EXPLAIN command in SQL

>>:  Several ways for Vue to achieve communication between components (multiple scenarios)

Recommend

Windows 10 1903 error 0xc0000135 solution [recommended]

Windows 10 1903 is the latest version of the Wind...

The process of building lamp architecture through docker container

Table of contents 1. Pull the centos image 2. Bui...

Methods for backing up Windows server files locally, Windows server data backup solutions

Important data must be backed up, and must be bac...

How to change fixed positioning of child elements to absolute positioning by CSS3 transform

This article introduces the method of using CSS3 ...

JavaScript to achieve drop-down menu effect

Use Javascript to implement a drop-down menu for ...

43 Web Design Mistakes Web Designers Should Watch Out For

This is an article about website usability. The a...

Solve the problem that VMware cannot install 64-bit operating system in win10 home version

Problem Description When VMware Workstation creat...

Mini Program Custom TabBar Component Encapsulation

This article example shares the specific code for...

Tutorial on disabling and enabling triggers in MySQL [Recommended]

When using MYSQL, triggers are often used, but so...

Example code for implementing image adaptive container with CSS

There is often a scenario where the image needs t...

MySQL knowledge points for the second-level computer exam mysql alter command

Usage of alter command in mysql to edit table str...

Detailed analysis of the syntax of Mysql update to modify multiple fields and

When updating a record in MySQL, the syntax is co...

Solve the problem of Linux FTP anonymous upload and download starting automatically

If you often use FTP server in your study or work...

How to install Docker on Windows 10 Home Edition

I recently used Docker to upgrade a project. I ha...

MySQL implements a function similar to connect_by_isleaf MySQL method or stored procedure

Recently, there is a particularly abnormal busine...