浏览器加载script(javascript)概述

原文地址：http://developer.oncecode.com/scriptloadingroundup/

转载请注明出处！！

 

 

几个名词解释

加载

下载并执行

时序图

时间和顺序示意图(原文中的waterfall chart瀑布图)

译文内容

以下是各浏览器并行加载script的相应处理？

回到IE7和Firefox 2.0的美好时光，没有浏览器会在加载script的时候并行加载其它资源(如图片等)。
取而代之的是，那些旧浏览器会阻塞住随后所有的资源请求，直到这个script被接收完，解析并执行。
下图是旧浏览器中script在加载时阻塞住其它请求的时序图(瀑布图)：

上图(瀑布图)所示的测试页面有6个HTTP请求：

1. HTML文档
2. 第一个script - 下载耗时2秒，执行耗时2秒
3. 第二个script - 下载耗时2秒，执行耗时2秒
4. 一个图片 - 下载耗时1秒
5. 一个样式表 - 下载耗时1秒
6. 一个iframe - 下载耗时1秒

上面的数字表明了script如何相互阻塞，并阻塞图片、css样式和iframe。
图片、css样式和iframe会并行地下载下来，直到所有script按顺序下载和执行完成。

旧浏览器中，和顺序加载script类似，它们的执行顺序跟加载顺序一致。
这会造成致命的错误，当第二个script中的代码依赖于第一个script中定义的变量的时候。
保证script的执行顺序能避免未定义变量错误(undefined)，但Dom对象引用丢失很明显是存在的：
浏览器下载完第一个script并保证它首先执行，而在它执行的时候，很可能它所引用的其它Dom对象仍然还在并行下载中。

值得庆幸的是，新一代的浏览器会并行下载多个script。

这对我们今天的web程序经常包含上百K包含Javascript代码在多个js文件中是有极大的好处的。
用新一代的浏览器(IE8，Firefox 3.6，Chrome 4和Safari 4)打开同样的测试页面，
它的资源加载和Javascript执行时序图(瀑布图)如下：

相比旧浏览器看起来好很多了，但仍然不够完美。
在这个案例中，IE8并行加载两个script和css样式文件，但图片和iframe被阻塞住了。
所有的新一代浏览器在并行加载script和其它资源的时候，不同程度上有类似的限制。
下面这个来自“Browserscope”的表格显示了它们在哪些资源上有所限制，并很好地证明了这一观点。
Browserscope最新添加的“比较(Compare)”按钮使得生成这一表格更容易了。

当加载script的时候，IE8阻塞住了图片和iframe。
Chrome 4，Firefox 3.6和Safari 4阻塞住了iframe。
Opera 10.10阻塞住所有其它类型的资源。
鉴于这些浏览器相对旧版本所作的很大的改进，我很有信息并行加载script会继续完善下去。
让我们对它们在下一代版本中改善到什么程度拭目以待吧。

--------传说中的个人签名----------

宜家代购，不一般的性价比哦！