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

目前我使用demo.js作为执行文件操作。代码：

var now=function(){ return(new Date())；} var t _ s=now()；而(现在()-t_s 2000) {}使用sleep.php作为请求文件操作。代码：

？php睡眠(3)；回声“var bb”；1.常规脚本标记加载

脚本src=' http : de mo . js '/脚本脚本src=' http :s LEEP . PHP '/在浏览器：中加载脚本图1-1。下载阻塞DomReady图1-2。执行阻塞多就绪

图1-1。下载阻止就绪

图1-2。执行阻塞就绪

2.异步属性

Async是html5中的一个新属性，它可以异步下载脚本文件，而不会阻塞DOMReady。

每个异步属性脚本在下载后和窗口加载事件前立即执行。因此，脚本执行顺序可能会受到干扰

支持异步浏览器：火狐3.6、IE 10、Chrome 2、Safari 5、iOS 5、安卓3

脚本src=' http:demo.js '异步/脚本脚本src=' http3360sleep.php '在浏览器中加载异步/脚本：

图2-1异步下载不阻止DomReady阻塞加载事件

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

图2-3 IE9不支持异步属性下载阻止DomReady

3.动态加载DOM脚本

文档对象模型(DOM)允许您使用JavaScript动态创建HTML的几乎所有文档内容。像页面上的其他元素一样，脚本元素可以通过标准的DOM函数轻松创建：

var loadScript=function(URL){ var s=document . create element(' script ')；s . type=' text/JavaScript '；s . async=“true”；s.src=urldocument . getelementsbytagname(' head ')[0]。appendChild}//加载js文件脚本loadScript(' sleep . PHP ')；load script(' demo . js ')；在浏览器中加载：

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

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

图3-3 IE9解除负载阻塞事件

总结

异步和脚本动态加载在现代浏览器中是相同的。前者使用方便，后者兼容性更好。异步加载文件的方式有很多，比如ajax(会受到同源性的限制)、iFrame、img…