关于js异步加载的理解

        最近在调试代码的时候想异步加载js进去，便查了一下js异步加载的相关知识，不查不知道，一查受益匪浅，平时没有注意的好多小细节，竟然有如此大的作用。

       一直以为bigpipe的原理就是异步加载那么简单，其实不然，最近几年，为了不让js的加载影响到网页的可视性，开始尝试将js放在底部，而不是一味的放在head中，解决了js加载慢引起的网页空白问题，当然这不是真正的异步加载，有其他的异步加载方法，如：

(function() {
     var script = document.createElement('script');
	script.type = 'text/javascript';     
	script.async = true;   
	script.src = 'xxxx.js';
     var x = document.getElementsByTagName('script')[0];     x.parentNode.insertBefore(s, x); })();

异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。

这种方法是在页面中<script>标签内，用 js 创建一个 script 元素并插入到 document 中。这样就做到了非阻塞的下载 js 代码。

script.async = true;  

其中这个属性可以没有，因为这是新加的一个属性，其实在现代浏览器中直接用async这个属性就可以实现异步加载。

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

新问题又来了， 这种加载方式在加载执行完之前会阻止 onload 事件的触发 ，而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等，所以还是会阻塞部分页面的初始化处理。

(function() {
     function async_load(){
        
 var script = document.createElement('script');
	script.type = 'text/javascript';     
	script.async = true;   
	script.src = 'xxxx.js';
     var x = document.getElementsByTagName('script')[0];     x.parentNode.insertBefore(s, x);
     }     if (window.attachEvent)         window.attachEvent('onload', async_load);     else         window.addEventListener('load', async_load, false); })();
这和前面的方式差不多，但关键是它不是立即开始异步加载 js ，而是在 onload 时才开始异步加载。这样就解决了阻塞 onload 事件触发的问题。

一直在探究的问题都是解决js不能并行下载的问题，js在解析的时候会影响渲染的问题，但是js在和服务器交互的时候呢，这个时间还是能不能充分利用起来呢？

bigepipe！对，就是他，他讲整个js分成一块一块的小模块，在加载某一个小js的时候，另一个js可以开始发送请求，并不像以前那样一直阻塞到那里等待上一个js从服务器加载完成再去执行另外一段js。

详情请看下面两篇博客：

http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html

http://www.searchtb.com/2011/04/an-introduction-to-bigpipe.html