Inside HTTP —— 资源下载次序与执行

下载资源顺序

主文档当然是第一个下载,其次

IE6是按html中定义的文档流顺序来下载外部资源，从上至下.

FF则略有不同,FF会优先下载js或css,而图片资源延迟到后面下载.

(经测试IE7,IE8也是先下载js或css,其它资源延后下载)

 

 

渲染或解析(非DOM)

 

对于 js 运行，以及页面加载相关事件的触发，特别做了测试。在 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

 

很明显，JS 的运行严格按照文档流中的顺序进行。其中 deferred 的脚本会在最后运行（注：Firefox 3.5 开始支持 defer，而且支持得很完美）。

 

再来看下 IE8，结果如下：

 

[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

 

可以看出，IE8 下，defer 只对 external 脚本有效，对 inline 脚本无效。

 

 

css下载和渲染几乎是同时进行的.即下载完成后会立即渲染到页面.

当某一脚本下载完成时，也会立刻解析和运行。脚本的运行严格按照文档流中的顺序进行，deferred 的脚本会在正常脚本运行之后运行,

所以特别注意js脚本放置顺序.如果第二个外部脚本中直接调用运行第一个外部脚本中的全局变量时，会产生脚本错误.

特别需要留意：脚本运行时，会暂停该脚本之下所有资源的下载（因为脚本可能改变文档流，甚至跳转页面，浏览器的暂停策略是合理的）。

 

至于DOM的渲染是根据浏览器的渲染引擎来决定的.

这里可以了解各个浏览器的渲染引擎 :http://www.mac52ipod.cn/post/Trident-Gecko-WebKit-Presto.php

 

ps:defer是个很有用的东西,当某个脚本被标识为defer=true时，浏览器下载完该脚本后，不会立即执行该脚本，而是对其它资源进行下载和解析.

默认情况下,defer为false,所以尽量不要在标识defer的js块或外部js文件中使用全局变量.

例子

<script type="text/javascript">

alert(a);

 

</script>

<script type="text/javascript">

var a=3

</script>

 

该脚本会报a未定义的错误，如果将第一个脚本块增加 defer=true标记,即可正常运行.所以说加上 defer 有点类似于 window.onload，但比onload灵活!

<script type="text/javascript" defer> //等同于defer=true

alert(a);

</script>

 

defer目前好像只支持  ie系列,ff3.5+浏览器(其它未测),所以使用时请注意兼容性问题