几种提高javascript载入速度的方式

几种提高javascript载入速度的方式(异步非阻塞的)


0. 直接document.write


<script language="javascript"> 
    document.write("<script src='test.js'><\/script>"); 
</script>

1. 动态创建script元素

原理：动态生成一个script的DOM元素，并设置它的src和type属性，之后附加到document.body的后面，这种方式是我们很常 用的，值得庆幸的是，它也不会阻塞后面资源的加载。HTTP瀑布图效果图如下（还可以通过firebug来查看）：


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

2. 用XMLHttpRequest取得要脚本的内容，再创建Script对象

原理：这个跟XML Eval的方式差不多。也是通过XMLHttpRequest的方式来加载外部的Javascript文件，不过之后是动态生成一个script标签，并 设置script标签的text属性为XHR返回的Javascript代码，这种方式也没有阻塞后面的资源的下载。HTTP瀑布图效果图如下（还可以通 过firebug来查看）：


var createXHR = function(){
    var xhr = false;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else {
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xhr;
}
var xhr = createXHR();
xhr.open("GET", "event.js", true);
xhr.onreadystatechange = function(){
    if (xhr.readyState === 4 || xhr.status === 200) {
        var script = document.createElement("script");
        document.getElementsByTagName("head")[0].appendChild(script);
        script.text = xhr.responseText;
    }
}
xhr.send(null);