Understand the rendering process of HTML pages (continued)

Last night I wrote an article about the rendering process of the browser.CodeI explained that I did not pass the browser test, but it was not convincing enough. There are still many imperfections. I tested it in the browser today and shared the test results with you, the testing process may be a bit messy and I hope you will understand it.

Test Browser: chrome v24.0.1312.52 M, Firefox v18.0, and opera v12.12.

In the WebKit kernel, when a webpage is displayed, a parser (parser) is used to parse HTML documents, generate a render tree, and finally render the page. This is done in a thread, so the two will not be done at the same time.

I divided the following two cases and tested them in different browsers.

• The style file is in the head. Other script files are at the beginning of the body and at the bottom of the body.
• The Style File is located at the beginning of the body. The script file is located at the same position as the above.

The test result is as follows: In Chrome, the position of the style file will affect the image download time, and there is no difference between the two in the other two browsers. The following is a detailed test process.

Test 1: The style file is in the head. Other script files are at the beginning of the body and at the bottom of the body.

Test code:

 1   <!  Doctype html >  2   <  Html  >  3   <  Head  >  4       <  Title  > Test page </  Title  >  5      <  Link  REL  = "Stylesheet"  Type  = "Text/CSS"  Href  = "Example. aspx? Sleep = 3"   />  6   </  Head  >  7   <  Body  > 8       <  Div  >  9 Hi, there! </  Div  >  10   11       <  Script  Type  = "Text/JavaScript"  >  12  Document. Write (  "  <SCRIPT src = 'other. aspx? Sleep = 5'> </scr  "   +   "  IPT>  "  );  13       </  Script >  14   15       <  Div  >  16 Hi, again! </  Div  >  17       <  IMG  SRC  = "Images/marx.jpg"  ALT  = "Marx"  />  18       <  IMG  SRC  = "Images/engels.jpg"  ALT  = "Engels"   />  19       <  IMG  SRC  = "Images/lenin.jpg"  ALT  = "Lenin"   /> 20   21       <  Script  SRC  = "Last. aspx"  Type  = "Text/JavaScript"  > </  Script  >  22   23   </  Body  >  24  </  Html  > 

1. Testing in chrome

After opening the page in the browser, I quickly cut a picture of the page, as shown in the following figure (click to view the big picture, the same below ):

 

As you can see, the test.htm file has been completed, and the page does not show any east or west. example.css is in pending state, but the last. js file at the bottom is loaded. This indicates that Chrome has been preloaded, downloaded in advance, and stored in the browser cache. Although last. js has been loaded, it has not been executed yet, because the style file in front of it will block the execution of the script.

After example.css is loaded, hi there! The browser is displayed on the screen as follows:

 

Through the network request, we can see that example.css has been loaded and Other. JS is in pending state, but three images under the script tag have been downloaded, which is caused by the browser's pre-loaded function. However, because the rendering of the browser is blocked by the other. js script, the three images, together with the "Hi again" above, are not displayed. In addition, the Code in last. JS is not executed yet.

Next, after loading other. JS, the browser will build a rendering tree, display "Hi again", and display the image. Because last. js has been downloaded previously, it will be executed immediately. The rendering process is complete. As shown in:

 

From this we can see that Chrome will pre-load the script Resources in the body (the style file is not tested), and the JS dynamically loaded by the Javascript script will not affect the download of image files, but it will affect the rendering of the image below it.

 

2. Test results in Firefox

Open the page quickly in Firefox browsing, as shown below:

Unlike chrome, "Hi there! ", It is displayed on the page, but the background color is white, indicating that the style file has not been downloaded yet. It is not displayed in chrome, And it will wait until the style file is loaded.

Next, after the whole page is loaded, It is shown as follows:

From the waterfall stream of the request, we can see that, like chrome, the browser is opposite to last. JS is pre-loaded. Unlike chrome, Firefox does not pre-load images, but waits until other. load after JS loading is complete.

In Firefox, the style file does not affect document rendering (the most typical phenomenon is that the page is displayed messy at the beginning, and there is no style. After the style file is downloaded, it will show normal ), in the body, JS files Dynamically Loaded by JavaScript will block the download of images after it.

3. In operabrowser

After testing in opera, operabrowser found that all resources are loaded in order and there is no so-called pre-loading. Below is a summary:

In opera, style files will block page rendering, which is similar to chrome. However, the waterfall stream with opera requests shows that all the resources on the page are loaded step by step, other. JS is earlier than last. JS loading. No pre-load.

Test 2. The style file is located at the beginning of the body, and the script file is located at the same position as test 1.

 1   <!  Doctype html  >  2   <  Html  > 3   <  Head  >  4       <  Title  > Test page </  Title  >  5   </  Head  >  6   < Body  >  7       <  Link  REL  = "Stylesheet"  Type  = "Text/CSS"  Href  = "Example. aspx? Sleep = 3"   />  8       <  Div  >  9 Hi, there! </  Div  >  10   11       <  Script  Type  = "Text/JavaScript"  >  12   Document. Write (  "  <SCRIPT src = 'other. aspx? Sleep = 5'> </scr "   +   "  IPT>  "  );  13       </  Script  >  14   15       <  Div  > 16 Hi, again! </  Div  >  17       <  IMG  SRC  = "Images/marx.jpg"  ALT  = "Marx"   />  18       <  IMG  SRC  = "Images/engels.jpg" ALT  = "Engels"   />  19       <  IMG  SRC  = "Images/lenin.jpg"  ALT  = "Lenin"   />  20   21       <  Script  SRC  = "Last. aspx" Type  = "Text/JavaScript"  > </  Script  >  22   23   </  Body  >  24   </  Html  > 

After testing, it is found that in Firefox and opera, the results are the same as those in Test 1, while in chrome, the results are slightly different. In Test 1, the image will not be downloaded until the style file in the head is loaded, but the image will be downloaded in parallel with the style file in Test 2, such:

 

Summary:

Pre-loading does exist, but it is not found in opera; chrome images can be downloaded in parallel with style files in the body, but cannot be downloaded in parallel with style files in the head. Execute the script after the style file before it is loaded. In Chrome and opera, unloaded resources will block the rendering of elements behind it, but Firefox will not. The test result may be related to the browser version.

After reading this, do you think it is a bit messy? I want to express myself as much as possible, but I am limited in my skills and can only do this. I hope you can point out what's wrong, you can also perform a test in person.

Related links:

Sequential relationship between JS and CSS

Effect of JS and CSS locations on loading sequence of other resources

How WebKit works

(End) ^_^