A brief discussion on whether CSS will block page rendering

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

Recommend

Tips for using the docker inspect command

Description and Introduction Docker inspect is a ...

Three uses and differences of MySQL not equal

Judgment symbols are often used in MySQL, and not...

Vue+Echart bar chart realizes epidemic data statistics

Table of contents 1. First install echarts in the...

How to get the intersection/difference/union of two sets in mysql

Common scenarios of MySQL: getting the intersecti...

MySQL 5.7.20 common download, installation and configuration methods and simple operation skills (decompression version free installation)

I just finished installing MySQL 5.7.19 in the ea...

How to connect a Linux virtual machine to WiFi

In life, the Internet is everywhere. We can play ...

Understanding MySQL deadlock routines through unique index S lock and X lock

In Beginners' Understanding MySQL Deadlock Pr...

CSS to achieve the like card effect in the lower right corner of the web page (example code)

Effect To implement HTML, first prepare a clean H...

The new version of Chrome browser settings allows cross-domain implementation

Preface Currently, the front-end solves cross-dom...

VMware installation of Centos8 system tutorial diagram (Chinese graphical mode)

Table of contents 1. Software and system image 2....

Summary of the 10 most frequently asked questions in Linux interviews

Preface If you are going to interview for a Linux...

The best solution for implementing digital plus and minus buttons with pure CSS

Preface: For the implementation of digital additi...

Implementing a simple calculator with javascript

This article example shares the specific code of ...

Implementation steps for building a local web server on Centos8

1 Overview System centos8, use httpd to build a l...

How to install ElasticSearch on Docker in one article

Table of contents Preface 1. Install Docker 2. In...