Why should css be placed in the head tag

Think about it: Why should css be placed in the head tag, and not at the end of body tag like javascript ?

Talk is cheap, show me the code.

OK, let's write some code to get the result.

Here is a little trick for the chrome console:

insert image description here

Limiting the download speed is very helpful for our testing! It allows us to see some details clearly

Let's limit the download speed to 40kb/s and start the test:

When css is introduced at the end of body tag

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <h1>Hello world</h1>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
</body>
</html>

Check the effect in the browser:

When the bootstrap.min.css file is not loaded, "Hello world" has already appeared on the webpage, but the style is the default style, indicating that the webpage has been rendered once.

insert image description here

After the bootstrap.min.css file is loaded, the style of "Hello world" on the webpage changes, and the font-size changes significantly. Therefore, it can be judged that the webpage has reflow

insert image description here

When the css is introduced in the head tag:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
 <h1>Hello world</h1>
</body>
</html>

Open in the browser to view the effect:

When bootstrap.min.css is not loaded, nothing appears on the web page, indicating that the web page is not rendered at this time.

insert image description here

When bootstarp.min.css is loaded, "Hello world" with bootstrap style appears on the web page, indicating that the web page is rendered.

insert image description here

From the above two examples we can see that:

When css is placed at the end of the body tag, after DOMTree is built, RenderTree is built, and the layout is calculated and rendered. After loading and parsing css, CSSOMTree is built, and RenderTree is rebuilt with DOMTree to recalculate the layout and render the web page.
When CSS is placed in the head tag, CSS is loaded first, and then CSS is parsed to build CSSOMTree . At the same time, DOMTree is built. After CSSOMTree and DOMTree are built, RenderTree is built to calculate the layout and render the web page. Comparing the two, css is placed in head tag, which is less than css placed at the end of the body tag. There is one less RenderTree construction, one layout calculation and one web page rendering, so the performance will be better; and when CSS is placed at the end of the body tag, "naked" HTML will appear briefly in the web page, which is not conducive to user experience

Here’s another little trick:

insert image description here

Through the above operations, you can view the entire process of web page parsing and rendering, so it is also very useful to solve the question "What are the advantages of placing CSS files in the head?"

This is the end of this article about why CSS should be placed in the head tag. For more relevant CSS head tag content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Sample code for flask and vue front-end and back-end separation project deployment

>>: CentOS6 upgrade glibc operation steps

Summary of MySQL Architecture Knowledge Points

Why should css be placed in the head tag

Summary of MySQL Architecture Knowledge Points

Detailed explanation of the observer mode starting from the component value transfer of Vue

Vue based on Element button permission implementation solution

Detailed explanation of how to use the vue verification code component

Detailed explanation of MySQL to obtain statistical data for each day and each hour of a certain period of time

IDEA complete code to connect to MySQL database and perform query operations

How to check whether the ports of the local computer and the remote server are connected under Linux

Vue implements a simple marquee effect

This article helps you understand PReact10.5.13 source code

How to avoid data loop conflicts when MySQL is configured with dual masters

Recommend

Detailed explanation of lazy loading and preloading of webpack

Analysis and solution of the reasons for left and right jumps when loading web pages

Solution to the root password login problem in MySQL 5.7

Solution to Docker pull timeout

Things to note when migrating MySQL to 8.0 (summary)

Call and execute host docker operations in docker container

MariaDB-server installation of MySQL series

What are the core modules of node.js

MySQL database monitoring software lepus usage problems and solutions

Detailed explanation of Linux server status and performance related commands

A very detailed summary of communication between Vue components

Page Refactoring Skills - Javascript, CSS

Example code for implementing equal height layout in multiple ways with CSS

Linux virtual memory settings tutorial and practice

How to modify the default storage location of Docker images (solution)