js同步、异步、延时、无阻塞加载

一、同步加载
　　平常默认用的都是同步加载。如：
<script src="http://yourdomain.com/script.js"></script>
　　同步模式又称阻塞模式，会阻止流览器的后续处理。停止了后续的文件的解析，执行，如图像的渲染。流览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。
　　通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。

　　同步加载流程是瀑布模型，异步加载流程是并发模型。

二、异步加载
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();

异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。
在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了。

 

三、延时加载

<script language="JavaScript" src="" id="my"></script> 
<script> 
setTimeout("document.getElementById('my').src='include/common.php'; ",3000);//延时3秒 
</script> 

<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>

<script src="https://files.cnblogs.com/elves/jquery-1.7.2.min.js" type="text/javascript"  defer="defer"></script>

 

 

四、无阻塞加载

浏览器加载静态资源和js的方式都是线性加载，所以一般情况可以将js放到</body>前，防止UI线程的阻塞。

而某些时候我们既希望js在整个网页的头部就加载，又担心js阻塞导致网站加载缓慢，就可以用到无阻塞加载js技术。

Dynamic Script Elements 动态脚本元素

DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容，一个新的<script>元素可以非常容易的通过标准DOM创建：

var script = document.createElement ("script");  
script.type = "text/javascript";  
script.src = "file1.js";   
document.body.appendChild(script); 

 

新的<script>元素加载file1.js源文件。此文件当元素添加到页面后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。

当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了Firefox和Opera，它们将等待此前的所有动态脚本节点执行完毕）。

大多数情况下，我们希望调用一个函数就可以实现Javascript文件的动态下载。下面的函数封装实现了标准实现和IE实现：

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 { //Others  
       script.onload = function(){ callback();  
     };   
   }  
   script.src = url;  
   document.getElementsByTagName("head")[0].appendChild(script);   
 }  
 
loadScript("file1.js", function(){  //调用  
    alert("File is loaded!");   
});

此函数接受两个参数：Javascript文件的Url和一个当Javascript接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步src属性，并将javascript文件添加到head。

动态脚本加载是非阻塞Javascript下载中最常用的模式，因为它可以跨浏览器，而且简单易用。

 

参考资料：

http://www.cnblogs.com/sharpxiajun/p/4072396.html 《探真无阻塞加载javascript脚本技术，我们会发现很多意想不到的秘密》

http://developer.51cto.com/art/201410/453722.htm 《高性能Javascript：脚本的无阻塞加载策略》

http://www.cnblogs.com/xyang/archive/2013/03/01/2939178.html 《LAB.js使用》

http://www.cnblogs.com/xyang/archive/2013/03/01/2938941.html 《资源文件的动态加载》