高性能 js -- 无阻塞加载脚本

参考: <<高性能JavaScript>> Nicbolas C. Zakas 著

javascript代码的下载和执行过程会阻塞浏览器的其他进程, 比如页面的绘制, 遇到<script>标签的时候都必须停下来等待代码的下载并执行. 然后才继续处理其他部分. 

无阻塞加载javascript代码的推荐方式:

// 将下面的这段加载代码放到</body>的闭合标签之前,这样确保了JS执行过程中不会阻碍页面的其他
// 内容显示, 其次第二个js文件完成下载时, 应用所需要的DOM结构已经创建完成, 并做好了交互的准备,
// 从而可以避免检测 winodw.onload事件.  (注: loader.js中存放的是loadScript()的实现)
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
    loadScript("the-rest.js",function(){
        app.init();
    });
</script>

也可以将loadScript 直接嵌入页面, 从而避免多产生一次HTTP请求

function loadScript(url,callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    if(script.readyState){//for IE
        script.onreadystatechange = function(){
            if(script.readyState == "onload" ||
               script.readyState == "complete"){
                script.onreadystatechange = null; //删除事件处理器, 避免重复调用,IE自身的问题
                callback();
            }
        }
    }else{ // for other browser,<script>标签的onload事件.
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.getElementByTagName("head")[0].appendChild(script);
}

如果需要按照顺序下载js文件,可以这样调用loadScript. 更好的方式是按顺序放到一个文件中, 避免多次HTTP请求.

// load in order, but better way is write all script in one file in order.
loadScript("file1.js",function(){
    loadScript("file2.js",function(){
        loadScript("file3.js",function(){
            console.log("All files are loaded in order!");
        });
    });
});

其他无阻塞模式:

1. 使用defer: 很多浏览器目前不支持(包括chrome)  

　　-----  当一个带有defer属性的js文件下载时, 不会阻塞浏览器的其他进程; 无论是内嵌的还是外联的defer的js脚本, 在DOM加载完成之前都不会被执行.

2. 动态脚本元素: 返回的代码通常会立即执行, 在代码包含其他接口调用时会带来问题(可以跟踪<script>节点的onload或readystatechange事件).

　　-----  文件在元素被添加到页面时开始下载; 无论在何时启动下载和执行过程不会阻塞页面其他进程, 推荐 append 到 head 下面.

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

3. 使用XMLHttpRequest

　　-----  代码是在<script> 标签之外返回的(xhr的open), 下载之后不会立即执行. 浏览器兼容性好. 但是必须要求js文件与页面处于同一个域中.

4. 使用第三方库

　　-----  LazyLoad:   loadScript()的增强版本

<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
    LazyLoad.js(['first-file.js','second-file.js'],function(){
        Application.init();
    });
</script>

　　-----  LABjs  :  提供对加载过程的更精细的控制, 并试图下载尽可能多的代码

<script type="text/javascript" src="lab.js"></script>
<script type="text/javascript">
    $LAB.script("first-file.js").wait()   //wait在这里保证按序执行
        .script('the-rest-files.js')
        .wait(function(){ // 下载完成后执行的函数
            Application.init();
        });
</script>