At the beginning

From the beginning of learning about the front end, it has been a rule that CSS should be introduced in the Head tag.

But why? I couldn’t find a satisfactory answer, so this article explores the problem from the perspective of performance and interaction.

To prepare

Chrome’s devtool configuration has the Performance function, which can perform Performance analysis on the web page, and will show the rendering process in a graphical display, which is very helpful for our analysis.

How to use: Right mouse button + check OR F12, then switch to the column of Performance, and click the refresh button in the upper left corner to analyze the page.

How to use the Performance tool for web analytics

Begin to explore

First find an external CSS file: https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/1.4.0/css/bootstrap.css

This is a CDN file for bootstrap. CSS, placed in the head tag and at the end of the body tag:

  1. Place in the head tag:
<! Doctype HTML > < HTML > <head> <title> </head> <body> <link Href = "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/1.4.0/css/bootstrap.css" rel = "stylesheet" > < p > hello, </p> </body> </ HTML >

(a) The browser first parses the HTML and generates the DOM tree;

(b) The browser calls the Network thread to download the bootstrap. CSS file, and the HTML does not render at this time; After downloading the CSS file, start parsing the CSS styles to generate the CSSOM tree. Then combine DOM tree and CSSOM tree to generate Layout tree (formerly known as Render tree), start to calculate the Layout, perform the drawing steps (generate Paint tree, details are not explored), and Render the page (there is also a step of Composite, which is not explored here).

As you can see from the above steps, when external CSS is introduced in the head tag, the parsing step of the HTML will work normally, but the rendering step will wait until the CSS file has been downloaded and parsed successfully, so we can conclude:

Blocks HTML rendering when CSS is introduced in the head tag.

Instead, the page should be rendered as follows: the page will be white for a while (depending on the download speed of the CSS file), and then a CSS style page will be rendered. To visualize this process more visually, we then simulated the weak Network environment using the versatile Chrome DevTool: set the Network speed to Slow 3G on the Network.

Refresh the page to observe the page:

(a) The page appears white screen for a long time:

(b) After a period of time, a text message with a CSS style appears to indicate that the page is rendered:

2. Place it in the body tag (at the tail first) :

<! Doctype HTML > < HTML > <head> <title> </head> <body> <p> Small maple < / p > < link href = "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/1.4.0/css/bootstrap.css" rel = "stylesheet" > </body> </html>

(a) Before parsing to the link tag, the browser parses HTML from top to bottom to generate DOM tree, and then combines with CSSOM tree (not external CSS) to generate Layout tree. After calculating the Layout, it draws and renders the page to the browser;

(b) The browser parses to the link TAB and downloads an external CSS file; After downloading, start parsing CSS styles to generate CSSOM tree, and re-parsing HTML to generate DOM tree; DOM tree and CSSOM tree combined to generate Layout tree, calculate Layout and Paint, complete the rendering of the page, this process is called reflow, also known as reflow, is a performance consumption phenomenon;

As you can see from the above steps, when external CSS is introduced in the body tag, it does not block the rendering of HTML, so the page rendering process should be as follows: first, the text is rendered before the CSS is loaded, but without CSS styles, known as “streaking”; After the CSS is loaded, the text style of the page changes; This can result in a “flash” or even a long “streaking” as the page style changes: “streaking” to “styling”; Layout Shift is a long time in the page.

CLS, full name
isCumulative
Layout ShiftThe Chinese name
isCumulative layout offset,
isGoogle Search Console is a core web metric,
isThe offset of the page layout during load. Score ranges
is0-1, where 0 indicates no offset and 1 indicates the maximum offset.

After the page is rendered, the style changes, resulting in the deviation of the page layout from the original layout, which is a very bad interactive experience. Here is an article on CLS: CLS of page visual stability, you can have a look if you are interested.

We then run a weak network simulation to show the page changes more visually:

(a) The page “streaks” before the CSS is loaded:

(b) After the CSS is loaded, the page is re-rendered and the text style changes (FONT-SIZE changes significantly) :

As you can see from the above exploration: CSS does not block page rendering when it is introduced into the body; Does that block page parsing? Let’s move on to the question.

3. Place it in the body tag (here in the middle) :

<! Doctype HTML > < HTML > <head> <title> </head> <body> <p> Small maple < / p > < link href = "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/1.4.0/css/bootstrap.css" rel = "stylesheet" > < p > hello, </p> </body> </ HTML >

Use the weak net to analyze the page rendering process:

(a) When the CSS is not loaded, the page only displays the first line of text and appears “streaking”;

(b) Once the CSS is loaded, the page is re-rendered, showing all the text, and with CSS styles;

As you can see, when CSS was introduced in the body, the parsing of the HTML was blocked, so the second line of text failed to parse and render during the download of the external CSS file, so we concluded:

When CSS is introduced in the body tag, parsing of the HTML is blocked, but rendering of the HTML is not blocked.

conclusion

  • When CSS is introduced in the head tag, the rendering of HTML is blocked, so the page is not rendered until the CSS has been downloaded and parsed, so the resulting page is styled fully. This process only happens once for parsing rendering: _HTML parsing generates DOM tree +CSS parsing generates CSSOM tree + Combination generating Layout tree + Calculate Layout + Draw _; There are downsides: a long white screen when a CSS file is slow to download, but a white screen seems more experientially friendly than a “streaking” page.
  • When CSS is introduced in the body tag, it will block the parsing of HTML, but it will not block the rendering of HTML. Therefore, the page will parse and render the HTML before the link tag before the CSS download is completed, and show on the page. But because there is no CSS style, the page will appear “streaking” phenomenon. After the CSS is downloaded and parsed, the page is reparsed and rendered to render HTML with style. This process results in reflow or repaint. From the perspective of user experience: when CSS is introduced in the body tag, although the page can be displayed first, it will lead to a very poor user experience due to the phenomenon of “streaking”. From a performance perspective, the page needs to be re-rendered after the CSS is loaded, which is a significant performance penalty compared to the CSS introduced in the head tag.