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

Detailed explanation of MySQL's FreeList mechanism

Detailed explanation of MySQL single table query operation examples [syntax, constraints, grouping, aggregation, filtering, sorting, etc.]

This article describes the MySQL single table que...

A brief discussion on whether CSS will block page rendering

Detailed explanation of MySQL's FreeList mechanism

Example operation MySQL short link

How to turn a jar package into a docker container

Use of TypeScript Generics

MySQL uninstall and install graphic tutorial under Linux

In-depth explanation of the maximum value of int in MySQL

Detailed explanation of Strict mode in JavaScript

When MySQL is upgraded to 5.7, WordPress reports error 1067 when importing data

JS implements circular progress bar drag and slide

How to install Solr 8.6.2 in Docker and configure the Chinese word segmenter

Recommend

Correct use of MySQL partition tables

Example of how to implement keepalived+nginx high availability

Summary of various implementation methods of mysql database backup

SQL query for users who have logged in for at least n consecutive days

Nginx's practical method for solving cross-domain problems

Three BOM objects in JavaScript

Detailed explanation of MySQL single table query operation examples [syntax, constraints, grouping, aggregation, filtering, sorting, etc.]

Implementation of VUE infinite level tree data structure display

Correct use of Vue function anti-shake and throttling

How to install mysql database in deepin 2014 system

The difference between MySQL database host 127.0.0.1 and localhost

MySQL 5.7 installation and configuration tutorial under CentOS7 (YUM)

Detailed explanation of inline elements and block-level elements in commonly used HTML tags

Basic commands for MySQL database operations

Detailed tutorial on installing Tomcat server and configuring environment variables on Win10 (picture and text)