提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

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

分析 脚本 加载 阻塞
2023-06-13 09:14:26 时间
由于浏览器是单线程的，因此脚本在载的时候会阻塞下载其它资源；虽然在现在浏览器已经有所改善，但仍然有待改进。
很显然，脚本必须按顺序执行，但没有必要按顺序下载，解决方法：
1。内嵌JS
通常由于页面大小和缓存能带来更多好处，因此外部文件引入JS更好一些；
在少数情况下，比如首页、少量JS情况下尚可接受。
2。XHREval
通过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);
});
functioninjectscript(scriptText){
vars=document.createElement("script");
s.text=scriptText;
document.getElementsByTagName("head")[0].appendChild(s);
}

4。ScriptinIframe
将需要的脚本放入到一个页面中，然后通过iframe来加载该页面。
缺点是iframe本身的开销比较大，另外浏览器安全机制不允许iframe中的js访问跨域的父页面，反之亦然。
5。ScriptDOMElement
JS动态创建scriptDOM元素并设置其src属性。
复制代码代码如下:
varscriptElem=document.createElement("script");
scriptElem.src="http://domain.com/test.js";
document.ge("head")[0].appendChild(scriptElem);

6。ScriptDefer
给script标签添加defer属性。
缺点是只有IE和一些新浏览器支持。
复制代码代码如下:
<scriptdefersrc="test.js"></script>

7。document.writeScriptTag
使用document.write把HTML标签script写入页面。
缺点是只有在IE中是并行加载脚本的。
复制代码代码如下:
document.write("<scripttype="text/javascript"src="test.js"><\/script>");

有一个大家不曾广泛讨论的不同点是对于浏览器忙碌状态的影响，包括浏览器的状态栏、进度条、Tab图标以及鼠标。
当你加载多个彼此间有依赖关系的脚本时，还需要一种能够保证执行顺序的技术。
技术 

 

并行下载 

 

可以跨域 

 

存在Script标签 

 

忙碌指示 

顺序保证 

大小(bytes)

XHREval

IE,FF,Saf,Chr,Op

no

no

Saf,Chr

-

~500

XHRInjection

IE,FF,Saf,Chr,Op

no

yes

Saf,Chr

-

~500

ScriptinIframe

IE,FF,Saf,Chr,Op

no

no

IE,FF,Saf,Chr

-

~50

ScriptDOMElement

IE,FF,Saf,Chr,Op

yes

yes

FF,Saf,Chr

FF,Op

~200

ScriptDefer

IE,Saf4,Chr2,FF3.1

yes

yes

IE,FF,Saf,Chr,Op

IE,FF,Saf,Chr,Op

~50

document.writeScriptTag

IE,Saf4,Chr2,Op

yes

yes

IE,FF,Saf,Chr,Op

IE,FF,Saf,Chr,Op

~100

在大多数情况下，ScriptDOMElement是一个好的选择。这种方式适用于所有的浏览器，而且没有跨域的限制，实现起来也非常的简单和易于理解。唯一的缺点是不能保证各个脚本的执行顺序。如果需要加载多个有依赖关系的脚本，应该将这些脚本拼成一个来保证其按需要的顺序执行，或者使用别的技术。
目前异步加载时保持执行顺序的方法有下面几种，由于篇幅原因，暂不详细描述。
单个脚本
1、HardcodedCallback
2、WindowOnload
3、Timer
4、ScriptOnload
5、DegradingScriptTags
多个脚本
1、ManagedXHR
2、DOMElementandDocWrite
本文参考《高性能网站建设进阶指南》

相关文章