Black box analysis of browser loading, rendering and parsing Processes

Document directory

• Browser Loading Sequence
• Differences between different browsers
• Note:

Black box analysis of browser loading, rendering and parsing Processes

Posted on August 20 th, 2009 in development
By lifesinger

Test page: loadtime/test.html

Use fiddler for monitoring. In IE6, the resource download sequence is as follows:

Obviously, resources that appear first in the Document Stream are downloaded first from top to bottom. Similar to IE8, Safari, chrome, and other browsers.

Firefox optimized the download sequence:

Firefox will download JS and CSS in advance, and delay images and other resources to be downloaded later.

For rendering, use Fiddler to slow down the network speed. You can see that the CSS will be rendered to the page immediately after the download, rendering and download are synchronized. JS parsing and running are similar.

Special tests were conducted on JS running and page loading events. Open the test page in Firefox:

[22:13:32.947] HTML Start

[22:13:32.947] normal inline script run time

[22:13:34.904] normal external script run time

[22:13:35.775] [body] normal external script run time

[22:13:35.789] [body end] normal external script run time

[22:13:35.789] HTML End

[22:13:35.791] deferred inline script run time

[22:13:35.791] deferred external script run time

[22:13:35.793] DOMContentLoaded

[22:13:38.144] images[0] onload

[22:13:38.328] images[1] onload

[22:13:39.105] images[2] onload

[22:13:39.105] images[3] onload

[22:13:39.106] window.onload

Obviously, JS runs strictly in the order in the Document Stream. The deferred script will run at the end (Note: Firefox 3.5 supports defer and is perfectly supported ).

Let's take a look at IE8. The results are as follows:

[22:33:56.806] HTML Start

[22:33:56.826] normal inline script run time

[22:33:57.786] normal external script run time

[22:33:57.812] deferred inline script run time

[22:33:57.816] document.readyState = interactive

[22:33:57.934] [body] normal external script run time

[22:33:58.310] [body end] normal external script run time

[22:33:58.310] HTML End

[22:33:58.346] deferred external script run time

[22:33:58.346] images[0].readyState = loading

[22:33:58.346] images[0].readyState = complete

[22:33:58.346] images[0] onload

[22:33:58.361] doScroll

[22:33:58.451] images[1].readyState = loading

[22:33:58.479] images[1].readyState = complete

[22:33:58.479] images[1] onload

[22:33:58.794] images[2].readyState = loading

[22:33:58.854] images[2].readyState = complete

[22:33:58.854] images[2] onload

[22:33:58.876] images[3].readyState = loading

[22:33:58.876] images[3].readyState = complete

[22:33:58.876] images[3] onload

[22:33:58.887] document.readyState = complete

[22:33:58.888] window.onload

It can be seen that in IE8, defer is only valid for the external script and invalid for the inline script. In addition
The closest is doscroll, which is widely used to simulate domcontentloaded.
. Be careful: it is just a simulation, and the details are not equivalent.

We can also get a somewhat unexpected result: the script placed before the completion of the body, during execution, it is still better to put it in the domready event. Parsing HTML end in Firefox or IE does not mean Dom can be operated safely, especially when pages are complex.

From the above data, we can also see that in the yslow performance optimization rule, we recommend that you set the style to the top and script to the bottom.

If you are interested, you can further test the dynamic addition of styles and scripts, which may be slightly different, but there is no special surprise.

Summary:

The download sequence of page resources is from top to bottom, and resources that appear first in the Document Stream are downloaded first (Note: concurrency exists. For details, refer to UA profiler
). When a similar download is completed, the page is immediately rendered (reflecting the meanings of stacked Style Sheets during rendering ). When a script is downloaded, it will be parsed and run immediately. The script runs strictly in the order in the document stream. The deferred script runs after the normal script runs (in Firefox and IE ).

Note: When a script is running, download of all resources under the script will be suspended (because the script may change the Document Stream or even jump to the page, the browser's suspension policy is reasonable ). Be careful about inline scripts, which will often block subsequent downloads.

Okay. You don't have to talk about it. We recommend that you test the above results in person, perform tests repeatedly, and perform crazy tests until you are confused and confused ......

 

 

 

Keen on Web Development

Semantics-browser Loading Process
Browser Loading Sequence

1. The HTML download sequence is top-down.Semantic Interpretation
   Separate connections are enabled for download.
2. After the CSS is downloaded, it is immediately rendered to the page. The download and rendering are synchronized. Each rendering will re-render the previous elements.
3. When the script is run, the download of page elements is stopped.

Differences between different browsers

1. Resources that appear first in the Document Stream, such as IE, safair, and chrome, are preferentially downloaded.
2. FF downloads scripts and styles in advance, and delays downloading image resources.

Note:

1. Because the script stops downloading elements, pay special attention to some inline scripts, which often blocks subsequent downloads.
2. For the sake of security, it is best to put a script after HTML disconnection in the domready event during execution. No matter which browser parses the HTML, it does not mean Dom can be operated safely, especially when webpages are complex.