Detailed analysis of the blocking problem of js and css

DOMContentLoaded and load
What is js blocking?
What is CSS blocking?
optimization
Summarize

DOMContentLoaded and load

Let us first understand two events, which will help with the subsequent analysis.

load event: load should only be used to detect a fully loaded page. The load event is fired when a resource and its dependent resources have finished loading. In other words, the load event will be triggered only after the page's html, css, js, pictures and other resources have been loaded.

DOMContentLoaded event: The DOMContentLoaded event is triggered when the initial HTML document is fully loaded and parsed, without waiting for style sheets, images, and subframes to complete loading. In other words, the DOMContentLoaded event will be triggered when the DOM tree has been constructed.

What is js blocking?

Because JS may operate the DOM, reflow and redraw during execution, the GUI rendering thread and the JS engine thread are mutually exclusive.

When parsing HTML, if a script tag is encountered, the rendering thread will pause the rendering process and hand over control to the JS engine. Inline js code will be executed directly. If it is an external js file, you need to download the js file and execute it after the download is complete. After the JS engine finishes running, the browser will return control to the rendering thread and continue parsing the DOM.

Therefore, js will block the construction of the DOM tree.

So, will it block the display of the page? Let's test it with the following code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>hello world</div>
  <script>
    debugger
  </script>
  <div>hello world2</div>
</body>
</html>

It can be seen that the DOMContentLoaded of this page occurs at 2.23s, which shows that js blocks the construction of the DOM tree. However, hello world is displayed on the page almost instantly, indicating that js does not block the rendering of the DOM elements before it.

For a better user experience, modern browser rendering engines will try to display content on the screen as quickly as possible. It does not wait until all DOM parsing is complete before laying out the render tree. Instead, when js blocking occurs, the already constructed DOM elements will be rendered to the screen to reduce the white screen time.

This is why we put the script tag at the bottom of the body tag, so that it will not affect the rendering of the previous page.

What is CSS blocking?

When we encounter a link tag or a style tag when parsing HTML, we calculate the style and build the CSSOM.

CSS will not block the construction of the DOM tree, but it will block the display of the page. Let's still use an example to test:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
</head>
<body>
  <div class="woo-spinner-filled">hello world</div>
  <div>hello world2</div>
</body>
</html>

Use an external CSS file and open Slow 3G to simulate a slower network speed. You can see that it only takes 30ms for the DOMContentLoaded event to be triggered. The page is still blank at this time, and the content does not appear on the page until almost 2.92s after the loaded event occurs.

The reason is that the browser does not render any of the processed content during the construction of the CSSOM. Even if the DOM has been parsed, the page will not display any content as long as the CSSOM is not constructed.

CSSOM is built only when we encounter a link tag or a style tag, so if there is a DOM element before the link tag, there will be a block when loading CSS.

<body>
  <div class="woo-spinner-filled">hello world</div>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
  <div>hello world2</div>
</body>

Doing so will cause a problem, which is page flickering. Before the CSS is loaded, the browser renders <div class="woo-spinner-filled">hello world</div> according to the default style. When the CSS is loaded, a new style is calculated for the div and it is re-rendered, resulting in a flickering effect.

To avoid page flickering, link tags are usually placed in the head.

Will css block the subsequent js execution? The answer is yes!

JS is about modification, it helps us modify every aspect of a web page: content, style, and how it responds to user interaction. These "all aspects" of the modification are essentially modifications to the DOM and CSSDOM. When the style of an element in CSSDOM is accessed in JS, you need to wait for the style to be downloaded before continuing to execute the JS script.

Run the following example and you will find that "this is a test" is printed in the console only after the CSS is loaded.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
</head>
<body>
  <div class="woo-spinner-filled">hello world</div>
  <div>hello world2</div>
  <script>
    console.log('this is a test')
  </script>
</body>
</html>

optimization

Use inline JavaScript and CSS so that the rendering process can start directly after fetching the HTML file.

Not all situations are suitable for inlining, so you can also try to reduce the file size, such as deleting useless code and compressing the size of CSS and JavaScript files through construction tools such as webpack; and enabling CDN to speed up file downloads.

For large CSS files, you can use media query attributes to split them into multiple CSS files for different purposes, so that specific CSS files are only loaded in specific scenarios.

If there is no DOM-related code in the JavaScript file, you can set the JavaScript script to be loaded asynchronously by marking the code with async or defer.

<script src="index.js"></script>
//The browser must wait for index.js to load and execute before doing anything else.

<script async src="index.js"></script>
//The loading of index.js is asynchronous and will not block the browser from doing anything else while loading.
//When it finishes loading, the JS script will be executed immediately.

<script defer src="index.js"></script>
//JS loading is asynchronous and execution is deferred.
//Script files marked with defer will wait until the entire document is parsed and executed before the DOMContentLoaded event is triggered

Summarize

This is the end of this article about the blocking problem of js and css. For more relevant js and css blocking content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Implementation of Vue3 style CSS variable injection
Take you to understand the basics of CSS, style
JS, CSS and HTML to implement the registration page
Vue3 implements CSS infinite seamless scrolling effect
React introduces antd-mobile+postcss to build mobile terminal
A brief discussion on the generation scheme of CSS irregular borders
CSS Glitch Art Explained
CSS3 uses transition animation and easing effect case study

<<: MySQL community server 8.0.16 installation and configuration method graphic tutorial under Windows

>>: How to create a Docker repository using Nexus

mysql replace part of the field content and mysql replace function replace()

Detailed analysis of the blocking problem of js and css

Table of contents

DOMContentLoaded and load

What is js blocking?

What is CSS blocking?

optimization

Summarize

mysql replace part of the field content and mysql replace function replace()

Analysis and solution of the reason why the frameset tag in HTML cannot be displayed normally

Application of Beautiful Style Sheets in XHTML+CSS Web Page Creation

Example steps for implementing class selectors and name attribute selectors in js

A brief analysis of the problem of mysql being inaccessible when deployed with docker-compose

Implementation of Single Div drawing techniques in CSS

MySQL optimization solution: enable slow query log

Implementation code of Nginx anti-hotlink and optimization in Linux

MySQL 5.7.16 ZIP package installation and configuration tutorial

Two ways to declare private variables in JavaScript

Recommend

Detailed explanation of HTML table inline format

Vue+Websocket simply implements the chat function

How to mount a new disk on a Linux cloud server

Steps for Vue3 to use mitt for component communication

Basic installation tutorial of mysql decompression package

Tutorial on installing MySQL 5.7.28 on CentOS 6.2 (mysql notes)

Introduction to HTML_PowerNode Java Academy

MySQL database backup and recovery implementation code

A Brief Analysis of MySQL - MVCC

Solution to the problem that the vertical centering of flex inside button is not centered

Solution to the problem that Xshell cannot connect to the virtualBox virtual machine

Vue implements calling PC camera to take photos in real time

HTML markup language - form

How to Check Memory Usage in Linux

Detailed explanation of Vue3's responsive principle