js按需加载js模块

无论当前 JavaScript 代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于加载js文件时浏览器会停止处理页面，先执行 JavaScript代码，然后再继续解析和渲染页面。同样的情况也发生在使用 src 属性加载 JavaScript的过程中。
无阻塞的脚本
减少 JavaScript 文件大小并限制 HTTP 请求数在功能丰富的 Web 应用或大型网站上并不总是可行。Web 应用的功能越丰富，所需要的 JavaScript 代码就越多，尽管下载单个较大的 JavaScript 文件只产生一次 HTTP 请求，却会锁死浏览器的一大段时间。为避免这种情况，需要通过一些特定的技术向页面中逐步加载 JavaScript 文件，这样做在某种程度上来说不会阻塞浏览器。
无阻塞脚本的秘诀在于，在页面加载完成后才加载 JavaScript 代码。这就意味着在 window 对象的 onload事件触发后再下载脚本。有多种方式可以实现这一效果。

一：defer 属性延迟加载脚本

<script type="text/javascript" src="script1.js" defer></script>

*对应的 JavaScript 文件将在页面解析到< script>标签时开始下载，但不会执行，直到 DOM 加载完成，即onload事件触发前才会被执行。当一个带有 defer 属性的 JavaScript 文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起并行下载。
*defer 属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持

动态脚本元素
二：通过标准 DOM 函数创建< script>元素

var script = document.createElment("script");
script.type = "text/javascript"
script.src = "script1.js";
document.getElementsByTagName("head")[0].appendChild(script);

三：通过检查 readyState 状态加载 JavaScript 脚本，函数进行封装

function loadScript(url,callback) {
    var script = document.createElment("script");
    script.type = "text/javascript";
    if(script.readyState) {      //IE
        script.onreadystatechange = function(){
            if(script.readyState == "load" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback();
            }
        }
    }else {
        script.onload = function() {
            callback();
        }
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

loadScript("script1.js", function(){
    loadScript("script2.js", function(){
        loadScript("script3.js", function(){
            alert("All files are loaded!");
        });
    });
});

使用 XMLHttpRequest(XHR)对象

四：通过 XHR 对象加载 JavaScript 脚本

var xhr = new XMLHttpRequest();
xhr.open("get","script1.js",true);
shr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            var script = document.creatElement("script");
            script.type = "text/javascript";
            script.text = xhr.responseText;
            document.body.appendChild(script);
        }
    }
}
xhr.send(null);

转载于：http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html?ca=drs-