js延迟加载的几种方式

转自这里：http://blog.csdn.net/newborn2012/article/details/17057759

网页中通常在head中包含script标签加载js文件，但有些js文件不是很重要，比如网页数据统计的js脚本，就可以在网页显示完之后再慢慢加载，这样也有利于网页的显示效率，别在加载js脚本的过程中，页面显示一片空白。

实现延迟加载的方式有很多种：

1，直接将script节点放置在</body>之前，这样js脚本就会在页面显示出来之后再加载。

2，使用script标签的defer和async属性，defer属性为延迟加载，是在页面渲染完成之后再进行加载的，而async属性则是和文档并行加载，这两种解决方案都不完美，原因在于不是所有浏览器都支持。

3，通过监听onload事件，动态添加script节点：

//Firefox，Opera，Chrome，Safari的方式

[javascript] view plain copy

1. var script = document.createElement ("script")  
2. script.type = "text/javascript";  
3.   
4. //Firefox, Opera, Chrome, Safari 3+  
5. script.onload = function(){  
6.     alert("Script loaded!");  
7. };  
8.   
9. script.src = "script1.js";  
10. document.getElementsByTagName("head")[0].appendChild(script);  

//IE的方式

[javascript] view plain copy

1. var script = document.createElement("script")  
2. script.type = "text/javascript";  
3.   
4. //Internet Explorer  
5. script.onreadystatechange = function(){  
6.      if (script.readyState == "loaded" || script.readyState == "complete"){  
7.            script.onreadystatechange = null;  
8.            alert("Script loaded.");  
9.      }  
10. };  
11.   
12. script.src = "script1.js";  
13. document.getElementsByTagName("head")[0].appendChild(script);  

其实IE和其它浏览器加载添加节点的方式都一样，只是加载之后监听是否成功的事件不一样，其实这个不需要也无所谓。

4，通过ajax下载js脚本，动态添加script节点

这种方式与第二种类似，区别就在与js脚本的自动下载还是通过ajax下载，ajax的方式显然可控制性更好一点，它可以先下载js文件，但不立即执行：

[javascript] view plain copy

1. var xhr = new XMLHttpRequest();  
2. xhr.open("get", "script1.js", true);  
3. xhr.onreadystatechange = function(){  
4.     if (xhr.readyState == 4){  
5.         if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){  
6.             var script = document.createElement ("script");  
7.             script.type = "text/javascript";  
8.             script.text = xhr.responseText;  
9.             document.body.appendChild(script);  
10.         }  
11.     }  
12. };  
13. xhr.send(null);  

但是ajax有一个缺点，就是无法引用使用CDN方式提供的js文件，因为这种方式下，你即时通过xhr.open下载了js文件，而向body中注入script节点时还是需要向CDN请求js文件。

具体使用哪种方式就得看具体情况了，有几个原则：

如果使用延迟加载技术，那么js脚本应该不能对页面的元素进行更改；

js脚本文件的数量应该尽量少，可以将多个合并在一起。

参考文档：

1，Javascript 异步加载详解

2，JavaScript 的性能优化：加载和执行

3，defer、async属性以及JS异步加载并执行解决方案