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