Shulou(Shulou.com)06/03 Report--

This article mainly introduces the introduction of js or css file in web development, which is very detailed and has certain reference value. Friends who are interested must finish reading it.

First introduce the css file, let the css style load out first, so that the user does not see a messy page; then introduce and load js. Js is generally functional and does not need to be loaded in advance; it gives the user a look and feel before giving the user a hands-on experience.

The operating environment of this tutorial: windows7 system, CSS3&&javascript1.8.5 version, Dell G3 computer.

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

We usually put the css on top and the js below; load the css file first (don't let the user see a messy page), and then load the js file. Js is generally functional and does not need to be loaded in advance; it gives the user a look and feel before giving the user a hands-on experience.

Location of the js script file

The js script should be placed at the bottom because there is a mutually exclusive relationship between the js thread and the GUI rendering thread. If js is placed first, when downloading and executing js, it will affect the rendering schedule to draw the page. The role of js is mainly to deal with the interaction, and the interaction must be rendered before the page can be carried out. Therefore, in order to ensure the user experience, try to draw the page first.

Location of the CSS file

CSS is one of the key factors in page rendering. Browsers will wait for all CSS downloads and parsing to be completed before rendering the page. Any delay in the critical path will affect the first screen time, so we need to transfer the CSS to the user's device as soon as possible, otherwise the user will only see a blank screen.

On the one hand, the CSS file is placed at the top because the order of placement determines the priority of the download, and more importantly, the rendering mechanism of the browser.

Css in the loading process will not affect the generation of the DOM tree, but will affect the generation of the Render tree, and then affect the layout, so generally speaking, style link tags need to be put in the head as far as possible, because the parsing of the DOM tree is from top to down, and the css style is loaded asynchronously, so that parsing the body nodes under the DOM tree and loading the css style can be as parallel as possible to speed up the generation of the Render tree.

With CSS at the bottom, the page can be rendered step by step, but after CSS downloads and parses, the rendered text and pictures need to be redrawn according to the new style, which is a bad user experience.

The above is all the content of this article "whether to introduce js or css file first in web development". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.