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

Editor to share with you how HTML resources are loaded, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Introduce

Completed a number of WEB-based projects, but also learned from the front-end js,css,html to the back-end python/php, how the two interact, and finally how the browser executes, which is clear in mind. However, one question has been lingering in my mind, and that is:

A html has several external resources (js,css,flash,image, etc.). When were these requests downloaded and executed?

I don't know, I don't understand, so I don't know when the js I wrote was executed, and I don't know why many high-performance suggestions put js in front of the bottom of a html.

If you are not sure, please come and study with me.

Concrete analysis

First, let's take a look at an example html page, as follows:

$(document) .ready (function () {$("# img") .attr ("src", "/ static/kkk.png");})

It has the following resources:

3 external js files, 1 inline js code

1 external css file, 1 inline css code

1 image file and 1 image requested by js

There are 6 http request in total.

Before analyzing, let's take a look at the result of the firefox request for this html, as shown in the following figure:

Let's take a look at the result of chrome (linux)'s request for this html, as shown in the following figure (the figure is small and can be opened in a new tab):

Let's analyze it first, and then explain the difference in the results of the two requests.

Request analysis

First of all, the following descriptions are mainly based on my own google, consulting friends and getting on SO and IRC, I did not read the relevant spec (of course, I would like to read, if you know the relevant spec friends, please leave a message thank you), can not guarantee its correctness and accuracy, at your own risk: D.

Based on the relevant research, my understanding is that for a URI request, the browser will follow the following request and execution order:

A thread downloads DOM (that is, html, regardless of external resources in html)

Another thread starts analyzing the downloaded DOM and downloading external resources (such as js, css, image, etc.)

The third thread, if any, downloads external resources other than those being downloaded by 2.

If more connections are allowed, more threads will continue to download other resources

How many connection (threads) a request can have at the same time depends on different browsers. The http1.1 standard stipulates that there are no more than 2 connection for the same server/proxy (that is, hostname), but in the actual browser implementation, the details are as follows:

Firefox 2: 2Firefox 3: 6Opera 9.26: 4Opera 9.5 beta: 4Safari 3.0.4 Mac/Windows: 4IE 7: 2IE 8: 6

So please think about the download order above according to this actual situation.

Then we look at the order of execution (the execution of js, the application of css, etc.):

As long as the browser "sees" the js code, it executes

The browser is executed line by line from the bottom down.

If the js code is in a function or object, it is executed only when the function or object is called

The so-called direct code (code that is not in a function or object) is executed sequentially from top to bottom.

When the css file is downloaded, the corresponding style will also be applied to the DOM

$(document) of onload or jquery. Ready () is executed after the DOM download is complete

In actual browsers, tags will automatically block downloads from other threads, such as firefox, which is why it is often recommended to put tags in front of them in web development.

But not all browsers are block, such as chrome will not block other connection. So the specific load also needs to refer to the specific browser implementation.

It is recommended that you put the label in front of it so that you can get better performance in most cases.

Analysis of requests for Firefox and chrome

Let's look back at the request response diagram in the above two figures.

Firefox

It has the following characteristics:

Download html first

After the html download is complete, download the external files (js, css,img) from top to bottom

Js will block downloads of other external files

Other files will be downloaded in parallel.

Chrome

It has the following characteristics:

Download html first

Download external files (js,css,img) from top to bottom

The download order of each resource is parallel.

You may wonder if js can be downloaded in parallel, then the code under DOM may be executed first. first of all, you can be sure that even if the following js completes the download first, it will not affect the overall execution order from top to bottom. Browsers will maintain this order. This way of chrome is also a trend of browsers in the future, which is one of the reasons why chrome can be faster.

The above is all the contents of the article "how HTML Resources are loaded". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.