标签：脚本无阻塞加载   web优化   动态脚本   

                    （图片来源：http://www.cnblogs.com/sharpxiajun/p/4072396.html）
     
    这是清除浏览器缓存后，第一次访问百度首页的场景，在Firefox的瀑布图中可以看到：javascript文件下载完毕后，有一段时间没有请求处理。这段时间过后，请求才会接着执行，这段时间就是HTTP请求阻塞。

    当浏览器遇到<script>标签时，浏览器会停止处理页面，先执行Javascript代码，然后再继续解析和渲染页面。在这个过程中，页面和用户的交互完全被阻塞了。通常表现为显示空白页面，用户无法浏览内容。

    现在的浏览器都支持并行下载文件，比如上图同时下载多个图片。而且，IE8 、FireFox3.5、Safari4和Chrome2都支持并行下载javascript文件，但是javascript文件的下载会阻塞其他资源的下载。尽管脚本的下载过程不会相互影响，但是页面仍然需要等待javascript的执行完毕才能继续。所以，新浏览器通过并行下载提高了性能，但是脚本阻塞问题仍然没有解决。

解决方法有：

（1）把<script>标签放到</body>闭合之前

<span style="font-size:14px;">  var script=document.createElemetn("script");

  script.type="text/javascript";

  script.src="file.js";;

  document.getElementsByTagName("head").appendChild(script);</span>

var script =document.createElement("div");
script.type="text/javascript";

script.onload=function(){
  alert("ok");
};

script.src="file.js";

document.getElementsByTagName("head")[0].appendChild(script);

var script=document.createElement("script");

script.type="text/javascript";
//IE
script.onreadystatechange=function(){
   if(script.readyState=="loaded"||script.readyState="complete"){
   script.onreadystatechange=null;
   alert("ok");
 }
}

function loadScript(url ,callback){
    var script=document.createElement("script");
    script.src="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].appendChild(script);

 }

loadScript("file1.js",function(){

  alert("ok")
});

loadScript("file1.js",function(){
      loadScript("file2.js",function(){
         loadScript("file3.js",function(){
          alert("ok");
          });
      }); 
 });

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

<script type="text/javascript">
loadScript("file.js",function(){
   alert("ok");
});
 
</script>

参考：（http://www.cnblogs.com/sharpxiajun/p/4072396.html）
              《高性能JavaScript 》

脚本无阻塞加载

标签：脚本无阻塞加载   web优化   动态脚本   

原文地址：http://blog.csdn.net/vuturn/article/details/46574651