Which js or css file should be introduced first?

Introduce the css file first and let the css style be loaded first, so that the user will not see a messy page; then introduce and load the js. js generally handles functions and does not need to be loaded in advance; it gives users a look and feel first, and then gives users a hands-on experience.

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

First introduce and load the css file, then introduce and load the js.

We usually put the css at the top and the js at the bottom; load the css file first (don’t let the user see a messy page), and finally Load js file. js generally handles functions and does not need to be loaded in advance; it gives users a look and feel first, and then gives users a hands-on experience.

The location of the js script file

The js script should be placed at the bottom. The reason is that the js thread and the GUI rendering thread are mutually exclusive. If js is placed at the head, When downloading and executing js, it will affect the rendering process of drawing the page. The main function of js is to handle interaction, and interaction must first render the page. Therefore, in order to ensure the user experience, try to let the page be drawn first.

Location of CSS files

CSS is one of the key factors in page rendering. (When there is external link CSS on the page,) the browser will wait for all CSS to be downloaded. And after the parsing is completed, the page is rendered. Any delays in the critical path will affect time-to-first-screen, so we need to transfer the CSS to the user's device as quickly as possible, otherwise the user will only see a blank screen (until the page is rendered).

CSS files are placed at the top because the order of placement determines the priority of downloading, and more importantly, the rendering mechanism of the browser.

css will not affect the generation of the DOM tree during the loading process, but it will affect the generation of the Render tree, which in turn affects the layout. Therefore, generally speaking, the link tag of the style needs to be placed in the head as much as possible. Because the DOM tree is parsed from top to bottom, and the css style is loaded asynchronously, in this case, parsing the body node under the DOM tree and loading the css style can be done in parallel as much as possible, speeding up the generation of the Render tree. speed.

Put the CSS at the bottom, and the page can be rendered gradually. However, after the CSS is downloaded and parsed, the text and images that have been rendered need to be redrawn according to the new style. This is a bad user experience. experience.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of Which js or css file should be introduced first?. For more information, please follow other related articles on the PHP Chinese website!