Why should css be placed in the head tag

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
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

Recommend

How to start multiple MySQL databases on a Linux host

Today, let’s talk about how to start four MySQL d...

Analysis of the solution to Nginx Session sharing problem

This article mainly introduces the solution to th...

td content automatically wraps table table td after setting the width too much text automatically wraps

Set the table's style="table-layout:fixed...

This article teaches you how to play with CSS border

Border Style The border-style property specifies ...

How to solve the mysql insert garbled problem

Problem description: When inserting Chinese chara...

MySQL 8.0.16 compressed package installation and configuration method graphic tutorial

This article shares the installation and configur...

The webpage cannot be opened because the div element lacks a closing tag

At first I thought it was a speed issue, so I late...

How to use Dockerfile to build images in Docker

Build the image Earlier we used various images fo...

Example of how to mosaic an image using js

This article mainly introduces an example of how ...

Apache Calcite code for dialect conversion

definition Calcite can unify Sql by parsing Sql i...

CSS border half or partially visible implementation code

1. Use pseudo-classes to display half of the Bord...

How to use not in to optimize MySql

Recently, when using select query in a project, I...

Detailed explanation of the difference between WeChat applet bindtap and catchtap

Table of contents 1. What is an event? 2. How to ...

Detailed tutorial on building a local idea activation server

Preface The blogger uses the idea IDE. Because th...

How to use nginx to block a specified interface (URL)

1. Introduction Sometimes, after the web platform...