说起JS的异步执行机制，如果百度一下，你首先会发现阮一峰的写过一篇关于异步机制的文章（ http://www.ruanyifeng.com/blog/2014/10/event-loop.html ），等你津津有味又一头雾水的看完，然后继续看百度的其他结果，然后会发现，阮一峰的这篇被另一个大牛朴灵给批判了
（ http://www.360doc.com/content/14/1011/13/15077656_416048738.shtml ）。
由此可见，关于异步执行机制到底是怎么回事，因为涉及到浏览器底层机制，所以不容易彻底了解清楚，就算是大牛阮一峰，也只是通过英文文献来了解，而且一知半解。我的这篇文章只是试图尽可能简单的描述一下JS的异步执行机制，坦白说，我现在并不能完全弄懂这个机制，所以也不能完全解释清这个机制，所以，如果我写的越严谨，就越容易出错，我只能简单但是较模糊的描述一下：
JS的运行环境是一个很复杂的环境，它里面有非常多的复杂的名词事物，用简单又不严谨的说法来说，运行环境里至少有下面这些事物：
有一个国外的web app，专门用来讲解异步事件的门道 Loupe ，这个更接近真实情况。为什么我不讲解这个？因为更复杂了，我们并不打算研究浏览器的底层，不是么？
然后说一下任务队列里的任务。所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，靠主线程自己就可以执行完成的任务；异步任务指的是，主线程执行开始之后，需要靠主线程之外的线程才能完成的任务。由主线程决定是否要动用其他线程。以下内容，不再提栈，只说主线程。
现在说重点：
异步任务的执行机制是：
当主线程遇到一个异步任务，比如一个ajax请求，当主线程执行到 xhr.send() 的时候，这个send命令是立即执行的， 并不会像一些人想象的，拖到所有同步任务的最后面。 然后主线程向http线程发送指令，要求http线程向服务器发送请求。这里强调一下http线程，显然它不是主线程的一部分，因为它可以并发，如果你有100个ajax请求，每个都需要1秒钟，是不是http线程要花100秒呢？并不是，它会并发100个请求，总共耗时大约1.01秒就完成了。
主线程向以http线程为代表的几个线程发送指令之后，主线程就暂时不再管这个ajax任务了，而是去看任务队列里的下一个任务。
http线程发送了请求之后接收反馈，收到之后，形成一个新的事件（可以叫做“我收到啦！”事件），然后插入到回调函数队列中，因为回调函数队列的优先级很低，所以会排到总队列的最后面，其结果就是：主线程把同步任务都完成了，才开始执行异步事件的 回调 。 注意，并不是异步任务在全体同步任务结束之后才开始，而是异步任务的回调通常在全体同步任务结束之后才开始！异步任务跟异步任务的回调是两回事！是两个任务！一个鲜明的例子就是 setTimeout(fn, 1000) ，计时是从主线程遇到 setTimeout() 任务，然后分配给计时器线程，计时器线程开始干活的时候就开始计时了！只不过要1秒之后 fn 才执行！ setTimeout() 和 fn 是两个任务！ setTimeout() 是立即执行， fn 才是1秒之后执行。但是 setTimeout() 的执行，人眼是感受不到的，因为并没有什么地方有一个秒表告诉你 setTimeout() 开始执行了；而fn的执行，人眼能感受到，所以人们会错误的以为fn才是异步任务，其实fn并不是， fn 是个回调任务，往往 fn 是同步任务，比如 fn 可能是 console.log(123) ，这怎么会是异步任务。
所以，异步机制是浏览器的两个或以上常驻线程共同完成的，异步请求是JS主线程和其他某个线程共同完成的，JS的执行线程发起异步请求（这时浏览器会开一条新的HTTP请求线程来执行请求，这时JS自己的任务已完成，继续执行线程队列中剩下的其他任务），然后在未来的某一时刻"任务队列"线程监视到之前的发起的HTTP请求已完成， "任务队列"就会把完成事件插入到JS执行队列的尾部等待JS处理 。
最后专门说说定时触发（settimeout和setinterval）。
定时触发是由浏览器的定时器线程执行的定时计数， 然后在定时时间到达之后，定时器线程把定时处理函数的执行请求插入到JS回调队列的尾端。
这个1到底是100毫秒之后弹出，还是1000毫秒（或更多时间）后弹出呢？又或是1100毫秒之后弹出？
答案是，1000毫秒多一点点之后弹出。
原因：浏览器会先执行setTimeout，也就是开始计时，然后开始执行sometask，执行了1000毫秒，然后去回调队列里看回调任务，alert(1)早就恭候了，因为定时100毫秒之后alert(1)就可以执行了。所以，等1000毫秒的任务完成，1就会立即弹出，所以答案是1000毫秒多一点点之后弹出。
所以用这两个函数的时候，实际的执行时间是大于或等于指定时间的，不保证能准确定时的。
最后强调一下setInterval。比如我希望每100毫秒打印一个1。然后，又有极端情况，就是sometask耗时1000毫秒。你以为sometask结束之后会打出10个1么？并不会，只会打出1个1，因为setInterval第一次读秒结束之后，回调队列出现了一个alert(1)，根据之前的理论，并不会执行。又过了100毫秒之后，计时器线程会去观察回调队列是不是已经有了alert(1)，如果有，就不再往回调队列里加alert(1)，目的就是为了避免回调叠加执行。
总之，你需要记住，异步任务就是主线程在任务队列里看到了这个任务，看了一眼之后就然后安排别的线程帮忙，然后主线程就忙别的去了，别的线程帮忙完事之后，再在队列末尾放一个新任务叫“帮忙完毕”，到此异步任务本身就完事。主任务看到“帮忙完毕”任务之后，就去执行回调，回调执行完，这个异步任务连同回调就全都完事。然后，如果并没有回调。。。没有就没有呗。
异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。方法一：也叫Script DOM Element
(function(){
var scriptEle = document.createElement("script")
scriptEle.type = "text/javasctipt"
scriptEle.async = true
scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"
var x = document.getElementsByTagName("head")[0]
x.insertBefore(scriptEle, x.firstChild)
})()
<async>属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码
(function(){
var ga = document.createElement('script')
ga.type = 'text/javascript'
ga.async = true
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'
var s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(ga, s)
})()
但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。
方法二：onload时的异步加载
(function(){
if(window.attachEvent){
window.attachEvent("load", asyncLoad)
}else{
window.addEventListener("load", asyncLoad)
}
var asyncLoad = function(){
var ga = document.createElement('script')
ga.type = 'text/javascript'
ga.async = true
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'
var s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(ga, s)
}
)()
这种方法只是把插入script的方法放在一个函数里面，然后放在window的onload方法里面执行，这样就解决了阻塞onload事件触发的问题。
注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。
方法三：其他方法
由于JavaScript的动态性，还有很多异步加载方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。
XHR Injection(XHR 注入)：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
var obj
if (window.XMLHttpRequest)
obj = new XMLHttpRequest()
else
obj = new ActiveXObject("Microsoft.XMLHTTP")
return obj
}
//采用Http请求get方式open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp()
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true)
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 &&xmlHttp.status == 200){
var script = document.createElement("script")
script.text = xmlHttp.responseText
document.getElementsByTagName("head")[0].appendChild(script)
}
}
XHR Eval：与XHR Injection对responseText的执行方式不同，直接把responseText放在eval()函数里面执行。
//获取XMLHttpRequest对象，考虑兼容性。
var getXmlHttp = function(){
var obj
if (window.XMLHttpRequest)
obj = new XMLHttpRequest()
else
obj = new ActiveXObject("Microsoft.XMLHTTP")
return obj
}
//采用Http请求get方式open()方法的第三个参数表示采用异步(true)还是同步(false)处理
var xmlHttp = getXmlHttp()
xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true)
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 &&xmlHttp.status == 200){
eval(xmlHttp.responseText)
//alert($)//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来
$("#btn1").click(function(){
alert($(this).text())
})
}
}
Script In Irame：在父窗口插入一个iframe元素，然后再iframe中执行加载JS的操作。
var insertJS = function(){alert(2)}
var iframe = document.createElement("iframe")
document.body.appendChild(iframe)
var doc = iframe.contentWindow.document//获取iframe中的window要用contentWindow属性。
doc.open()
doc.write("<script>var insertJS = function(){}<\/script><body onload='insertJS()'></body>")
doc.close()
GMail Mobile：业内JS内容被注释，所以不会执行，在需要的时候，获取script中的text内容去掉注释，调用eval()执行。
<script type="text/javascript">
/*
var ...
*/
</script>
HTML5新属性：async和defer属性
defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。
<script type="text/javascript" defer></script>
async属性：HTML5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。
<script type="text/javascript" defer></script>
Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer，这样IE 4之后的所有IE都支持异步加载。
没有async属性，script将立即获取（下载）并执行，期间阻塞了浏览器的后续处理。如果有async属性，那么script将被异步下载并执行，同时浏览器继续后续的处理。
总结： 对于支持HTML5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在匿名函数中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。
