管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

无阻塞加载脚本分析[全]

　　由于浏览器是单线程的，因此脚本在载的时候会阻塞下载其它资源；虽然在现在浏览器已经有所改善，但仍然有待改进。

　　很显然，脚本必须按顺序执行，但没有必要按顺序下载，解决方法：

　　1。内嵌JS

　　通常由于页面大小和缓存能带来更多好处，因此外部文件引入JS更好一些；

　　在少数情况下，比如首页、少量JS情况下尚可接受。

　　2。XHR Eval

　　通过XMLHttpRequest从服务器端获取脚本。

　　主要缺陷是，通过XHR获取的脚本必须部署在和主页面相同的域中。

复制代码代码如下:

　　Ajax.get("test.js", function (xhr) {

　　eval(xhr.responseText);

　　});

　　3。XHR注入

　　使用XHR获取脚本并创建script标签。

　　同样，通过XHR获取的脚本必须部署在和主页面相同的域中。

复制代码代码如下:

　　Ajax.get('test.js', function (xhr) {

　　injectscript(xhr.responseText);

　　});

　　function injectscript(scriptText) {

　　var s = document.createElement('script');

　　s.text = scriptText;

　　document.getElementsByTagName('head')[0].appendChild(s);

　　}

　　4。Script in Iframe

　　将需要的脚本放入到一个页面中，然后通过iframe来加载该页面。

　　缺点是iframe本身的开销比较大，另外浏览器安全机制不允许iframe中的js访问跨域的父页面，反之亦然。

　　5。Script DOM Element

　　JS动态创建script DOM元素并设置其src属性。

复制代码代码如下:

　　var scriptElem = document.createElement('script');

　　scriptElem.src = 'http://domain.com/test.js';

　　document.ge('head')[0].appendChild(scriptElem);

　　6。Script Defer

　　给script标签添加defer属性。

　　缺点是只有IE和一些新浏览器支持。

复制代码代码如下:

　　7。document.write Script Tag

　　使用document.write把HTML标签script写入页面。

　　缺点是只有在IE中是并行加载脚本的。

复制代码代码如下:

　　document.write("<script type='text/javascript' src='test.js'><\/script>");

　　有一个大家不曾广泛讨论的不同点是对于浏览器忙碌状态的影响，包括浏览器的状态栏、进度条、Tab图标以及鼠标。

　　当你加载多个彼此间有依赖关系的脚本时，还需要一种能够保证执行顺序的技术。

技术	并行下载	可以跨域	存在Script标签	忙碌指示	顺序保证	大小 (bytes)
XHR Eval	IE, FF, Saf, Chr, Op	no	no	Saf, Chr	-	~500
XHR Injection	IE, FF, Saf, Chr, Op	no	yes	Saf, Chr	-	~500
Script in Iframe	IE, FF, Saf, Chr, Op	no	no	IE, FF, Saf, Chr	-	~50
Script DOM Element	IE, FF, Saf, Chr, Op	yes	yes	FF, Saf, Chr	FF, Op	~200
Script Defer	IE, Saf4, Chr2, FF3.1	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~50
document.write Script Tag	IE, Saf4, Chr2, Op	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~100

在大多数情况下，Script DOM Element是一个好的选择。这种方式适用于所有的浏览器，而且没有跨域的限制，实现起来也非常的简单和易于理解。唯一的缺点是不能保证各个脚本的执行顺序。如果需要加载多个有依赖关系的脚本，应该将这些脚本拼成一个来保证其按需要的顺序执行，或者使用别的技术。

　　目前异步加载时保持执行顺序的方法有下面几种，由于篇幅原因，暂不详细描述。

　　单个脚本

　　1、Hardcoded Callback

　　2、Window Onload

　　3、Timer

　　4、Script Onload

　　5、Degrading Script Tags

　　多个脚本

　　1、Managed XHR

　　2、DOM Element and Doc Write

　　本文参考《高性能网站建设进阶指南》

教程首页更多教程