异步和DOM脚本文件加载的比较

现在我用demo.js作为文件操作。


var现在=函数(){返回+(New Date());}
无功t_s =现在();
而(现在)-(t_s<2000){ }



使用sleep.php作为请求的文件操作。代码uff1a


< PHP
睡眠(3);
echo'var BB;
>



1。一般脚本标记加载







浏览器中的加载情况:图1-1。下载阻断Domready图1-2。执行封锁DomReady


图1-1。下载拦截DomReady


图1-2。执行阻断DomReady

2。async属性

异步是HTML5的附加属性,它的作用是能够下载脚本异步并不能阻止DOMReady。

每个异步属性是它被下载后立即执行,并在窗口的加载事件执行。因此很有可能是脚本执行顺序被打乱了

支持异步的浏览器:Firefox 3.6 +,10 + 2 + IE,Chrome,Safari 5 +,iOS 5 +,安卓







加载浏览器:


图2-1异步下载的非阻塞Domready阻塞加载事件


图2-2执行阻塞加载事件


图2-3 IE9不支持下载阻断Domready async属性

三.动态加载脚本

文档对象模型(DOM)允许您使用Javascript动态创建HTML的所有文档内容:


VaR加载脚本=功能(URL){
var = document.createelement('script);
号=中/ Javascript的;
s.async =真实;
s.src =网址;
document.getelementsbytagname(很){ 0 }。appendChild(S);
}
加载脚本文件
Loadscript(睡眠。php);
Loadscript('demo .js);



加载浏览器:


图3-1下载阻塞加载事件


图3-2执行阻塞加载事件


图3-3 IE9无阻塞加载事件

总结

在现代浏览器异步脚本动态加载是一致的。前者是易于使用,并具有更好的相容性,有许多方法来加载文件异步,Ajax(同源限制),iframe,IMG…