西红柿爱番茄

在High Performance Web Sites blog网站里介绍了几种动态加载js文件的速度的比较，原文：http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/

第一种就是我们普通的通过<script />标签引入，但是这样方法会拖慢页面的加载：

第二种叫“异步传输script”的方法：

[javascript]
var script = document.createElement(‘script’);
script.src = "sorttable-async.js";
script.text = "sorttable.init()"; // this is explained in the next section
document.getElementsByTagName(‘head’)[0].appendChild(script);
[/javascript]

虽然说是异步的，但是在速度方面提高还不是很快，但是比普通的模式的加载快多了：

下面的loadScript函数，有Nicholas C. Zakas所写，他自称是最好的模式，本人没有测试，大家对这感兴趣的可以去尝试测试一下速度，可以在Firefox的Firebug插件来测试：

[javascript]
function loadScript(url, callback){

var script = document.createElement("script")
script.type = "text/javascript";

if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}

script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
[/javascript]

第三种方式是John Resig’s Degrading Script Tags Pattern，他是怎么使用的：

[javascript]
<script src="jquery.js">
jQuery("p").addClass("pretty");
</script>
[/javascript]

他这种方法的改进之处在于只有当jquery.js文件下载下来之后，script标签内的代码才会执行，下面是一个处理这类模式的代码例子,当然了，下面的这段代码需要先于将要处理的script标签执行的。：

[javascript]
var scripts = document.getElementsByTagName("script");
var cntr = scripts.length;
//从最后的那个script标签开始查找，如果查找到script标签的src的文件跟条件的符合，就执行里面的js代码。
while ( cntr ) {
var curScript = scripts[cntr-1];
if ( -1 != curScript.src.indexOf(‘sorttable-async.js’) ) {
eval( curScript.innerHTML );
break;
}
cntr–;
}
[/javascript]

最后一种模式就是通过window.onload事件，在页面加载完成之后再加载Javascript文件，这种方法也成为“懒惰加载模式 Lazy Loading”

[javascript]
window.onload = function() {
var script = document.createElement(‘script’);
script.src = "sorttable-async.js";
script.text = "sorttable.init()";
document.getElementsByTagName(‘head’)[0].appendChild(script);
}
[/javascript]

虽然这种方法看起来很普通，可是大家看看在速度和时间的方面：

从这些速度和时间的花费上可以看的出来：异步传输和懒惰模式动态加载js文件比普通的通过script标签来加载，改善了速度和时间的花费，更重要的是没有太大的影响页面的加载，使得用户无须在一个空白页面里等待太久。

• Normal Script Tags – 487 ms
• Asynchronous Script Loading – 429 ms
• Lazyloading – ~320 ms