A brief discussion on whether CSS will block page rendering

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, let’s analyze it together.

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

WebKit rendering process

Gecko rendering process

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

HTML parses the file to generate DOM Tree, and parses the CSS file to generate CSSOM Tree
Combine Dom Tree and CSSOM Tree to generate Render Tree
Rendering is done according to the Render Tree, rendering pixels onto the screen.

From the process we can see

DOM parsing and CSS parsing are two parallel processes, so this also explains why CSS loading does not block DOM parsing.
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.
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

When only CSS exists on the page, or JS is placed before CSS, DomContentLoaded does not need to wait until CSS is loaded.
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');
 })![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d30219afd9e84bc99875991b7d284435~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87519598e6484ec38db8daed23f586c9~tplv-k3u1fbpfcp-zoom-1.image)
 </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 as follows: 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.

Summarize

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)

This is the end of this article on whether CSS will block page rendering. For more information about CSS blocking page rendering, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: My CSS framework - base.css (reset browser default style)

>>: Details of watch monitoring properties in Vue