JavaScript异步机制

单线程异步执行的JavaScript

JavaScript是单线程异步执行的，单线程意味着代码在任务队列中会按照顺序一个接一个的执行。异步代表JavaScript代码在任务队列中的顺序并不完全等同于代码的书写顺序，比如事件绑定、Ajax、setTimeout()等任务的发生时间是“不可被预期”的。
既然JavaScript是单线程机制，那Ajax为什么是异步的？setTimeout()是怎样执行的？

在浏览器中，JavaScript引擎是单线程执行的。也就是说，在同一时间内，只能有一段代码被JavaScript引擎执行。页面加载时，JavaScript引擎会顺序执行页面上所有JavaScript代码，优先执行同步代码。而异步代码由事件触发引擎按照“事件发生”的顺序添加到JavaScript引擎的任务队列中，待所有同步代码执行结束后，JavaScript引擎会按照任务队列中的顺序来执行异步代码。
JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序。
浏览器的内核是多线程的，它们在内核控制下相互配合以保持同步，一个浏览器至少实现三个常驻线程：JavaScript引擎线程，GUI渲染线程，浏览器事件触发线程。

1. JavaScript引擎是基于事件驱动单线程执行的，JavaScript引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JavaScript线程在运行JavaScript程序。
2. GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(Reflow)时,该线程就会执行。但需要注意，GUI渲染线程与JavaScript引擎是互斥的，当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行。

setTimeout()与setInterval()

setTimeout()

JavaScript引擎在执行setTimeout(fn, 10)时，一方面继续执行setTimeout(fn, 10)后面的同步代码，同时另一方面开始计时，在10ms之后将fn插入任务队列中。待所有同步代码执行结束后（JavaScript引擎空闲），依次任务队列中的异步代码。所以，setTimeout(fn, 10)并不能准确的在10ms之后执行，而是大于等于10ms。

看下面两段代码，会对setTimeout()的执行顺序有更直观的印象

第一段：

console.log(1)
setTimeout(function () {console.log('a')}, 10);
setTimeout(function () {console.log('b')}, 0);
var sum = 0;
for (var i = 0; i < 1000000; i ++) {
    sum += i;
}
console.log(sum);
setTimeout(function () {console.log('c');}, 0);

输出结果：

1
49999995000000
b
a
c

代码执行的逻辑如图所示，纵向代表时间，左边表示同步代码的执行顺序，右边表示异步代码的任务队列，从左到后的箭头表示将异步代码插入任务队列。

如果，将for循环上限去掉一个0。输出结果：

1
49999995000000
b
c
a

两段代码的区别在于for循环执行的时间不同，第一段代码的for循环执行时间大于10ms，所以console.log(‘a’)先被插入任务队列，等for循环执行结束后，console.log(‘c’)才被插入任务队列。第二段代码的for循环执行时间小于10ms，所以console.log(‘c’)先被插入任务队列。

setInterval()

setInterval()的执行方式与setTimeout()有不同。假如执行setInterval(fn, 10)，则每隔10ms，定时器的事件就会被触发。与setTimeout()相同的是，如果当前没有同步代码在执行（JavaScript引擎空闲），则定时器对应的方法fn会被立即执行，否则，fn就会被加入到任务队列中。由于定时器的事件是每隔10ms就触发一次，有可能某一次事件触发的时候，上一次事件的处理方法fn还没有机会得到执行，仍然在等待队列中，这个时候，这个新的定时器事件就被丢弃，继续开始下一次计时。需要注意的是，由于JavaScript引擎这种单线程异步的执行方式，有可能两次fn的实际执行时间间隔小于设定的时间间隔。比如上一个定时器事件的处理方法触发之后，等待了5ms才获得被执行的机会。而第二个定时器事件的处理方法被触发之后，马上就被执行了。那么这两者之间的时间间隔实际上只有5ms。因此，setInterval()并不适合实现精确的按固定间隔的调度操作。