last night to write a paper about the browser's rendering process essays, but only by a small piece of code explained, not through the browser testing, convincing enough, and there are many drawbacks, in the browser test today, and share the results of the test, the testing process can be a bit of a mess, I hope you understand.

test browser: Chrome v 24.0.1312.52 m, Firefox v18.0, Opera v12.12.

in WebKit core, web page on the display when there will be a Parser (Parser to parse the HTML document, then go to generate Render Tree (Render Tree), the final rendered page. This is done in a thread, so both will not simultaneously.

I was divided into the following two situations, and tested in different browsers.

Style files in the head, the other to a script file even a at the beginning of a body, one at the bottom of the body. At the beginning of a body style file, the location of the script file is the same as above.

test results, in chrome, and the location of the style file download time will affect the image, and in two other browser, there is no difference between the two cases. Below is the detailed test process.

a: stylesheets in the head, the other two script files one at the beginning of a body, one at the bottom of the body.

test code:

 


code is as follows:


<! Doctype html> <Html> <Head> <Title> The test page </title> <Link rel="stylesheet" type="text/CSS" href="http://www.jb51.net//web/example.aspx?sleep=3"/> </head> <Body> <Div> Hi, there! </div> <The script type="text/javascript" > Document.write (" <script SRC='http://www.jb51.net//web/other.aspx?sleep=5' > </SCR "+" ipt> "); </script> <Div> Hi, again! </div> <Img SRC="http://www.jb51.net//web/images/marx.jpg" Alt="Marx"/> <Img SRC="http://www.jb51.net//web/images/engels.jpg" Alt="Engels"/> <Img SRC="http://www.jb51.net//web/images/Lenin.jpg" Alt="Lenin"/> <Script SRC="http://www.jb51.net//web/last.aspx" type="text/javascript" > </script> </body> </html> 1, the test case in the Chrome

after I open the page in the browser, quickly turn pages cut a diagram, as shown below (click to view a larger version, similarly hereinafter) :

can be seen from the diagram above, the test. The HTM document have been loaded, also did not show anything on the page, the example. The CSS is in pending state, however, is located in the bottom of the last. The js has finished loading. Suggesting that chrome has carried on the preload, download ahead of time, in the browser's cache. Although last. Js already loaded, but has not yet been implemented, because he is in front of the style file blocks the execution of the script.

then, as the example. The CSS after completion of loading, Hi there! Displayed on the screen, the browser of the screenshot is as follows:

the request through the network, you can see that example. CSS has been loaded, other. Js is in pending state, but now the three images under the script tag has been downloaded, it is caused by the functionality of the preloaded by the browser. But due to the browser's rendering by other. Js script blocked, so the three images along with it &other; Hi again” Won't be displayed. In addition, the last at this time. In the js code has not yet been implemented.

next, when other. Js loading is completed, the browser will construct the render tree, showing &other; Hi again” And show pictures. Due to the last. Js previously has been downloaded, so last. Js will be implemented immediately. The whole rendering process to complete. As shown in the figure below:

 

thus, Chrome will be preloaded body (style file no test), the script in the resources by JS JavaScript dynamic load does not affect the image file to download, but will affect the rendering image below it.

 

test results of 2, Firefox

    After open the page in Firefox browse quickly capture, as shown below:

and are obviously different in Chrome, " Hi there! " , has been shown on the page, but the background color is white, that there is no download style file this time. And is not shown in the Chrome, will have to wait until the style file is loaded.

next, when the entire page loading is completed, the screenshot is as follows:

from the request of the waterfall flow can be seen that similar to Chrome, the browser to the last. Js preload, and in Chrome, firefox not to preload images, but wait until other. Js loaded before loading.

firefox, rendering style file did not affect documents (the most typical phenomenon is that the web page display is a mess at the beginning, no style, when the style file is according to normal after download), in the body, by dynamic load JS JavaScript files will block it at the back of the picture to download.

3, in the Opera browser

after testing in the Opera, find the Opera browser comparison &other; Behave &throughout; , all resources are loaded according to the order does not appear the so-called loaded in advance, it's a piece of the overall rendering:

in the Opera, the style file blocks rendering of the page, this is similar to Chrome, however, with the request of the Opera waterfalls flow can be seen that all resources are in a web page step by step loading, other. Js earlier at last. The js is loaded. No preload.

test 2, the style file at the beginning of a body, the location of the script file and test one.

  
 


code is as follows:


<! Doctype html> <Html> <Head> <Title> The test page </title> </head> <Body> <Link rel="stylesheet" type="text/CSS" href="http://www.jb51.net//web/example.aspx?sleep=3"/> <Div> Hi, there! </div> <The script type="text/javascript" > Document.write (" <script SRC='http://www.jb51.net//web/other.aspx?sleep=5' > </SCR "+" ipt> "); </script> <Div> Hi, again! </div> <Img SRC="http://www.jb51.net//web/images/marx.jpg" Alt="Marx"/> <Img SRC="http://www.jb51.net//web/images/engels.jpg" Alt="Engels"/> <Img SRC="http://www.jb51.net//web/images/Lenin.jpg" Alt="Lenin"/> <Script SRC="http://www.jb51.net//web/last.aspx" type="text/javascript" > </script> </body> </html> After test, found in firefox and Opera, results and testing, and in Chrome is slightly different, in test 1, the picture will have to wait until the head of the style file after loading to download, but will test 2 parallel downloads and style files, the following figure:

:

preloaded exists, but have not found in the Opera; Chrome's pictures can be downloaded and parallel style file of the body, but can't and style files parallel downloads in the head. The execution of the script to in front of it the style file after loading. In Chrome and Opera, did not finish loading the resource blocks behind it elements of the rendering, and firefox won't. Test results may be related to browser versions.

after watching these, you find some wrong, I want to express, but limited to my level is limited, can only do this, wrong place hope you pointed out, we can also do a test to see in person.

the ^_^

# 0 - #


This concludes the body part