A brief analysis of the black box of browser loading, rendering and parsing processes_javascript skills

Use Fiddler to monitor. 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. It is similar in IE8, Safari, Chrome and other browsers.

Firefox has optimized the download order:

Firefox will download js, css in advance, and delay downloading of images and other resources until 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 downloading, and the rendering and downloading will be performed simultaneously. The parsing and running of js are also similar.

Special testing has been done for js running and triggering of page loading related events. 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] 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 flow. The deferred script will be run at the end (Note: Firefox 3.5 starts to support defer, and the support is perfect).

Look at IE8 again, 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 under IE8, defer is only valid for external scripts and not for inline scripts. In addition, the closest thing to DOMContentLoaded is doScroll. This is why doScroll is widely used to simulate DOMContentLoaded. Caution: This is just a simulation and is not equivalent in detail.

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

From the above data, we can also see the basis for YSlow performance optimization rules, which recommend placing styles at the top and scripts at the bottom.

Those who are interested can further test the situation of dynamically adding styles and scripts. It will be slightly different, but there is no special surprise.

Final summary:

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

Special attention should be paid to: when a script is running, the download of all resources under the script will be suspended (because the script may change the document flow or even jump to the page, the browser's pause policy is reasonable). Be careful with inline scripts, which can often block subsequent downloads.

Okay, no more nonsense. It is recommended that you test the above results yourself, test repeatedly, and test like crazy until you are dazzled, confused, and suddenly realize that you continue to be confused...