Browser loading, rendering and parsing process black box analysis _javascript skills

With Fiddler monitoring, under IE6, the resource download order is:

Obviously, the download order is from top to bottom and the resources that appear first in the document stream are downloaded first. In IE8, Safari, Chrome and other browsers are similar.

Firefox optimizes the download order :

Firefox will be JS, css early download, and the picture and other resources deferred to the back of the download.

For rendering, the use of Fiddler will slow speed, you can see the CSS download will immediately render to the page, rendering and download synchronization. JS parsing and running, also similar.

For JS run, as well as page load related events triggered, particularly tested. Under Firefox, open the test page:

[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] Domconten TLOADED[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, the operation of JS is strictly in the order of the document flow. Where the deferred script will run at the end (note: Firefox 3.5 starts to support defer and is perfectly supported).

Then look at the 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[2 2: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] def Erred 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 

As you can see, under IE8, defer is valid only for external scripts and not for inline scripts. Another, the closest to the domcontentloaded is doscroll. This is why DoScroll is widely used to simulate domcontentloaded. Caution: Simulation alone is not equivalent in detail.

You can also get a somewhat unexpected result: the script that is placed before the end of the body is still best placed in the Domready event. Whether in Firefox or IE, parsing to the HTML end does not mean that the DOM can be safe to operate, especially when the page is more complex.

From the above data, you can also see the YSlow performance optimization rules, recommend the style of the top and script base.

Interested in further testing the dynamic addition of styles and scripts will be slightly different, but not particularly surprise.

The final summary :

The download Order of page resources is from top to bottom, the resources that appear first in the document stream are downloaded first (note: There is concurrency, please refer to UA Profiler). When a style download completes, it is immediately rendered to the page (reflecting the meaning of cascading style sheets in the rendering). When a script download is complete, it is parsed and run immediately. Scripts run strictly in the order of the document flow, and deferred scripts run after the normal script runs (Firefox and IE).

It is particularly necessary to note that when the script runs, the download of all resources under the script is paused (because the script may change the document flow, or even jump the page, the browser's pause strategy is reasonable). Be careful with inline scripts, which often block subsequent downloads.

Well, don't say much nonsense. As a result, we recommend that you test yourself, test again and again, and go on a crazy test until you are dazzled by the confusion.