Let you understand how HTML and resources are loaded

All content in this blog is licensed under Creative Commons Licenses . When quoting this content, please keep Zhu Tao , the source , and be non-commercial .

Introduction

I have completed several web-based projects, and I have learned how the front-end js, css, html and back-end python/php interact with each other, and how the browser executes them. However, one question has always lingered in my mind:

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

I don't know when the js I wrote is executed, and I don't know why many high-performance suggestions are to put js before the </body> at the bottom of the html.

If you are not clear about it, please come and learn with me.

Specific analysis

First, let's look at a sample HTML page, as follows:

 <html>
  <head>
   <script src= "/static/jquery.js" type= "text/javascript" ></script>
   <script src= "/static/abc.js" type= "text/javascript" >
   </script>
   <link rel= "stylesheets" type= "text/css" href= "/static/abc.css" ></link>
   <script>
    $( document ).ready( function (){
     $( "#img" ).attr( "src" , "/static/kkk.png" );
   });
   </script>
  </head>
  <body>
  <div>
  <img id= "img" src= "/static/abc.jpg" style= "width:400px;height:300px;" />
  <script src= "/static/kkk.js" type= "text/javascript" ></script>
  </body>
</html>

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

That’s 6 http requests in total.

Before analyzing, let's take a look at the result of Firefox's request for this HTML, as shown below:

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 relatively small and can be opened in a new tab):

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

Request analysis

First of all, I would like to point out that the following descriptions are mainly based on my own Google, consulting friends, and obtaining them on SO and IRC. I have not read the relevant specs (of course I would like to read them, if you know relevant specs, please leave a message, thank you), and I cannot guarantee its correctness and accuracy. You are responsible for your own risks :D.

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

One thread downloads the DOM (that is, HTML, regardless of external resources in HTML)
Another thread will start analyzing the downloaded DOM and start downloading external resources (such as js, css, image, etc.)
The third thread (if any) will download external resources other than those being downloaded by thread 2.
If more connections are allowed, more threads will continue to download other resources.

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

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

So please think about the download order above based on this actual situation.

Then let's look at the execution order (js execution, css application, etc.):

As long as the browser "sees" the js code, it will execute
The browser executes from bottom to bottom, line by line
If the js code is in a function or object, it will only be executed when the function or object is called.
The so-called direct code (code that is not in a function or object) will be executed sequentially from top to bottom.
When the CSS file is downloaded, the corresponding style will also be applied to the DOM
onload or jQuery's $(document).ready() is executed after the DOM is downloaded.

In actual browsers, when encountering a <script> tag, it will automatically block the download of other threads, such as Firefox. This is why it is often recommended to put the <script> tag before </body> in web development.

But not all browsers block, for example, Chrome does not block other connections. So the specific load still needs to refer to the specific browser implementation.

It is recommended to put the <script></script> tag before </body>, which can get better performance in most cases.

Request analysis for Firefox and Chrome

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

Firefox

It has the following features:

First download the html
After the html download is complete, download external files (js, css, img) from top to bottom
js will block the download of other external files
Other files will be downloaded in parallel

chrome

It has the following features:

First download the html
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 below the DOM will be executed first. First of all, it is certain that even if the following js is downloaded first, it will not affect the overall execution order from top to bottom. The browser will maintain this order . This method of Chrome is also a trend of future browsers, and this is one of the reasons why Chrome can be faster.

An interesting episode

After I asked this question, I started to do a lot of research. I consulted friends, asked SO questions, and even asked on Firefox IRC.

The friends who answered me were all very patient. However, most of them asked me a question : Why do you need to know these details when doing web development ?

I am still puzzled by such questions. I have always believed that a good programmer needs to know not only how, but also what and even why .

Knowing how only means that you are a qualified coder who can simply use what others provide to develop.

Knowing what means you start to pay attention to how things are done behind the scenes. As time goes by, you will gradually become an experienced programmer.

Knowing why means you are on the road to becoming a hacker, and gradually moving towards the path of a technical expert. In the long run, you will grow a lot. Refer to How To Become A Hacker.

Let's enjoy the details and the essential happiness, rather than just staying at the superficial level of happiness.

in conclusion

Browsers are a market that all major manufacturers are competing for, whether they are independent (Firefox, Chrome, IE, Opera, Safari) or based on certain kernels (Aoyou, Sogou, TT, 360, etc.), but what is certain is that browsers will be more powerful, comply with standards, respond faster, etc., and our lives as web programmers will be much better.

Some details in this article are still vague, and I may write another article later to provide a more thorough and clear explanation.

Welcome to discuss.

postscript

This time I spared no expense. I had accumulated nearly 400 SO reputation points before, and I immediately sent out 150 people to find the most satisfactory answer.

For details, please refer to:

Load and execution sequence of a web page?

There is a more detailed answer in the post, which you can use as a reference.