Where should the css style files be placed?

css style files should be placed in the head at the top of the HTML, which can increase the performance of the page. Put the CSS file in the header, and when loading the HTML to generate the DOM tree, the DOM tree can be rendered at the same time; this can prevent flickers, white screens or confusing layouts.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css style files should be placed in the head at the top of the HTML.

Putting css in the head can increase the performance of the page.

CSS is placed in the header. When loading html to generate a DOM tree, the DOM tree can be rendered at the same time. This prevents flickering, white screens, or confusing layouts.

In order to provide a better user experience, the browser's rendering engine will try to display content on the screen as soon as possible. It will not wait until all HTMl elements are parsed before building and laying out the DOM tree, so part of the content will be parsed. and display. In other words, the browser can render incomplete DOM trees and CSSOM, reducing the time of white screen as quickly as possible.

If the CSS is placed at the bottom, the browser prevents the content from being rendered gradually. While the browser is waiting for the last css file to be downloaded, a "white screen" appears (a white screen when a new connection is opened, and then a "white screen" appears. Text, pictures, and styles appear last). This is very serious, because when the network speed is very slow, the CSS download time is relatively long, which naturally brings a "white screen" to the user for a long time, and the user experience is very poor.

If the CSS file is placed at the bottom, the browser prevents the content from being rendered gradually. While the browser is waiting for the last CSS file to be downloaded, a "white screen" appears (white screen when a new connection is opened, and then Text appears first, images appear last, and styles appear last). This is very serious, because when the network speed is very slow, the CSS download time is relatively long, which naturally brings a "white screen" to the user for a long time, and the user experience is very poor.

(Learning video sharing:css video tutorial)

The above is the detailed content of Where should the css style files be placed?. For more information, please follow other related articles on the PHP Chinese website!