异步加载js方案

24，请给出异步加载js方案，不少于两种

 

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

 

异步加载方式：

 

(1) defer，只支持IE

 

(2) async：

 

(3) 创建script，插入到DOM中，加载完毕后callBack，见代码：

 

function loadScript(url, callback){

    var script = document.createElement_x("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);

}

25，请设计一套方案，用于确保页面中JS加载完全。

 

var n = document.createElement_x("script");

n.type = "text/javascript";

//以上省略部分代码

//ie支持script的readystatechange属性(IE support the readystatechange event for script and css nodes)

if(ua.ie){

    n.onreadystatechange = function(){

        var rs = this.readyState;

        if('loaded' === rs || 'complete'===rs){

            n.onreadystatechange = null;

            f(id,url); //回调函数

        }

};

//省略部分代码

//safari 3.x supports the load event for script nodes(DOM2)

    n.addEventListener('load',function(){

        f(id,url);

    });

//firefox and opera support onload(but not dom2 in ff) handlers for

//script nodes. opera, but no ff, support the onload event for link

//nodes.

}else{

    n.onload = function(){

        f(id,url);

    };

}