Javascript之无阻塞脚本-原创手记-慕课网

问题来源：javascript在浏览器中的性能，可以认为是开发者所面临的最严重的可用性问题。这个问题因javascript的阻塞特性变得复杂。

一般解决办法：1、调整脚本位置，将<script>标签放在body最底部；2、合并脚本文件，将几个脚本文件合并为一个，减少下载次数。

以上办法虽对问题有所优化，但是阻塞依然存在。

无阻塞脚本：无阻塞脚本的秘诀在于，在页面加载完成后才加载javascript代码。用专业术语来说，这意味着在window对象的load事件触发后再下载脚本。

方式一：延迟的脚本
描述：通过使用HTML4为<script>标签定义的一个扩展属性：defer。
代码：<script type="text/javascript" src="file.js" defer></script>

方式二：动态脚本注入
描述：由于DOM的存在，我们可以用javascript动态创建HTML中的几乎所有内容，包括<script>元素。这种方式使得文件会在该元素被添加到页面时开始下载。这种技术的重点在于，无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。
代码：

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{  //其他浏览器
                script.onload = function(){
                    callback();
                };
            }
        }
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChile(script);
}

方式三：XMLHtmlRequest脚本注入
描述：此技术会先创建一个XHR对象，然后用它下载javascript文件，最后通过创建动态<script>元素将代码注入页面中。这种方法的主要优点是，你可以下载javascript代码但不立即执行。主要局限性是，javascript文件必须与所请求的页面处于相同的域。
代码：

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

另：无阻塞脚本加载相关工具——YUI3、LazyLoad、LABjs。