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

How to set the width and height of html table cells

When making web pages, you often encounter the pr...

Practical skills that must be mastered in calling UNI-APP components in the easycom mode

This article is intended to be a starting point f...

MySql 5.7.21 free installation version configuration method under win10

1. Unzip to the location where you want to instal...

MySQL 5.7.20 installation and configuration method graphic tutorial under Windows

Install MySQL under Windows for your reference. T...

Vue implements horizontal scrolling of marquee style text

This article shares the specific code for Vue to ...

Detailed example of MySQL data storage process parameters

There are three types of MySQL stored procedure p...

Detailed graphic explanation of installing MySQL database and configuring Java project on Linux

1. Install MySQL database ① Download and unzip an...

How to use DQL commands to query data in MySQL

In this article, the blogger will take you to lea...

A Deep Dive into JavaScript Promises

Table of contents 1. What is Promise? 2. Why is t...

Tomcat Nginx Redis session sharing process diagram

1. Preparation Middleware: Tomcat, Redis, Nginx J...

Things to note when designing web pages for small-screen mobile devices

The reason is that this type of web page originate...

How to distinguish MySQL's innodb_flush_log_at_trx_commit and sync_binlog

The two parameters innodb_flush_log_at_trx_commit...

20 CSS coding tips to make you more efficient (sorted)

In this article, we would like to share with you ...

Practice of implementing user login through front-end and back-end interaction of Node.js

Table of contents 1. Project Requirements Second,...

Solve the problem of shrinking Mysql transaction log and log files being too large to shrink

1. MS SQL SERVER 2005 --1. Clear the log exec(...