The order in which HTML CSS JavaScript is loaded

The load order of the three html/css/javascript affects the loading speed of the entire page. And the speed of loading directly affects PV (traffic), but also affect the economic income. In the big Web site, it may open faster than a second, a year can bring hundreds of millions of revenue. So we must pay attention to.

I. GENERAL PRINCIPLES

The overall principle of loading is to load sequentially, that is, from the head of the page to the body end order. The browser sends the request and the server returns the code for the entire page. So, the next step is to render the page code.

Second, load order

If the structure is written like this:

The CSS file inside the link will be loaded first. But here to remember, CSS files and image files are downloaded in parallel with the HTML code.

That is, while the CSS file is loaded, the HTML DOM structure continues to load the build. In the process of loading, if a CSS or IMG is found, a request is sent, and then the HTML continues to build, and when the server sends back the data, it will be added to the corresponding DOM tree location.

But when you go to script, it's different when you load JS. A complete JS file needs to be loaded before the code goes down. does not download in parallel. So, according to the above figure, the loading link will also be loaded JS. The DOM tree in the body is built only when JS is loaded. The problem with this is that when the JS code runs,

Dom is not loaded in the page, so in the JS file to join jquery's $ (document). Ready (function () {}) or window.onload or JS file only functions, otherwise it will be an error.

Third, the location of the JS file placement.

1. Put it in the head, above the link label. So the placement in the above image is incorrect. The right way to put it is:

2, placed at the bottom of the body

　　

The order in which HTML CSS JavaScript is loaded