下载资源顺序
主文档当然是第一个下载,其次
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+浏览器(其它未测),所以使用时请注意兼容性问题
分享到:
相关推荐
Inside C#——C#编程从入门到精通_0.rar,对于学习c#很有帮助!!!!
这本书不用多说了,看书吧
《Inside VCL(深入核心——VCL架构剖析)》是台湾首席程序员李维先生的最新大作,相信大家都如雷灌耳,这里是书本的全套源码,喜欢大家喜欢。
j2me Inside J2VM——源代碼Inside J2VM——源代碼
数字互联网电视——“Linux inside”.pdf
进阶课程㉕丨Apollo规划技术详解——Optimization Inside Motion Planning.pdf
Inside C++ Object Model/Inside C++ Object Model/Inside C++ Object Model/Inside C++ Object Model
Inside VCL,看看VCL架构,剖析VCL架构,深入核心地剖析。
由 Dale Rogerson 撰写的《COM技术内幕——微软组件对象模型》(Inside COM)一书附带的源码适合在Visual C++ 6.0下编译,同样的源码拿到 Visual Studio 2010 下面进行编译,会报告很多错误。因此本人对源码中的错误...
藏经阁-AMAP INSIDE 智能定位带来的时代新机会——互联网世界底图.pdf
Inside VCL(深入核心——VCL架构剖析) (2008 年度畅销榜NO.22 ) <br>原书名: Inside VCL(深入核心——VCL架构剖析) 作者: 李维 著 <br> ☆领略优秀Framework之大局观! 追寻软件架构大师...
Allegro自带的ODB++inside工具下载,ODB++inside插件可以将Allegro的.brd文件转化为仿真工具Hyperlynx使用的文件。共6个文件,需要分别下载。 ODB_Inside_Cadence_Allegro_111_Windows_64_SA_Setup.zip.001 ODB_...
本工具是为了方便 将C/C++ 结构体自动生成 C# 结构,方便大家编码 微软官方下载地址已经不可用了,我找寻了很久,为了下载花了不下百元,现在我上传来 给大家减负。
包括android内幕以及架构非常不错的资料
Allegro自带的ODB++inside工具下载,ODB++inside插件可以将Allegro的.brd文件转化为仿真工具Hyperlynx使用的文件。共6个文件,需要分别下载。 ODB_Inside_Cadence_Allegro_111_Windows_64_SA_Setup.zip.001 ODB_...
Inside_NAND_Flash_Memories.pdf
Delphi 教程 系列书籍 (036) 《Inside 深入核心VCL架构剖析》 网友(邦)整理 EMail: shuaihj@...【Delphi系列书籍下载】(辛苦整理,大家珍惜!!!) http://blog.csdn.net/shuaihj/archive/2010/11/22/6036817.aspx
站内资源分太高,花了点时间找了下载地址,请帮忙好评。
Allegro自带的ODB++inside工具下载,ODB++inside插件可以将Allegro的.brd文件转化为仿真工具Hyperlynx使用的文件。共6个文件,需要分别下载。 ODB_Inside_Cadence_Allegro_111_Windows_64_SA_Setup.zip.001 ODB_...