通常JavaScript文件的加载会占用网页中其他元素的下载资源，在一些特别追求Web应用响应速度而且JavaScript文件并不那么小的时候，可以考虑使用异步加载JavaScript的方法来避免影响正常内容的加载进程。

异步加载的思路很简单：

1. 创建一个script的DOM节点；
2. 对其的type属性赋值为text/javascript；
3. 再指定它的src属性为要加载的js文件URL；
4. 把这个DOM节点加入到页面中。

它与异步加载图片的方法类似，但也有区别：

1. 一旦它被指定了src属性，不管有没有被插入到页面中，浏览器就会马上开始下载；
2. 这个DOM节点可以插入到head和body里的任何位置。

实现的代码如下：

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: Firefox, Safari, Chrome, and Opera
        script.onload = function(){
            callback();
        };
    }
 
    script.src = url;
    document.body.appendChild(script);
}

使用时，只要简单地传递JavaScript文件的URL和回调函数即可：

loadScript("http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js",
    function(){
        YAHOO.namespace("mystuff");
 
    //more...
});

更多内容，请参看：

loading scripts without blocking by Steve Souder
Loading JavaScript without blocking by Nicholas C. Zakas
Even Faster Web Sites: Performance Best Practices for Web Developers

Related posts

• Professional JavaScript for Web Developers, 2nd Edition (0)
• Even Faster Web Sites: Performance Best Practices for Web Developers (1)
• 避免使用JavaScript的With (0)
• 请保留链接的outline (1)
• 获取鼠标在页面中的位置 (0)