Javascript异步机制

Javascript作为一种单线程语言，是如何实现异步编程的呢？

相信不少人对Javascript单线程表示怀疑：为何单线程可以实现异步操作呢？其实Javascript确实是单线程的（我们不妨把这个线程称作主线程），但它实现异步操作的方式确实借助了浏览器的其他线程的帮助。那其他线程是怎么帮助Javascript主线程来实现异步的呢？答案就是任务队列（task queue）和事件循环（event loop）。

一、任务队列

首先，作为单线程语言，在Javascript中定义的任务都会在主线程中执行。但是并不是每个任务都会立刻执行，而这种不立刻执行的任务我们称作异步任务。相反，那些立刻执行的任务我们把它们称作同步任务。而这些异步任务都会交给浏览器的其他线程去执行，但是主线程需要了解这些异步任务执行的状态，才方便进行下一步操作。

打个比方，主线程准备做饭，所以下达一个异步任务去买菜，异步任务买完菜之后得告诉主线程：“我买完菜啦”，这个时候主线程才好开始做饭。

而我们知道因为Javascript是单线程，所以上述的“下一步操作”没法直接定义在主函数里（不然就被当做同步任务直接执行了），那这些应该定义在哪里呢？答案就是异步任务的回调函数中。在Javascript异步机制中，任务队列就是用来维护异步任务回调函数的队列。这样一个队列用来存放这些回调函数，它们会等到主线程执行完所有的同步函数之后按照先进先出的方式挨个执行。那么执行完任务队列之后呢？Javascript主线程就执行完毕了吗？当然不是，不然网页加载完毕之后，谁来处理后续与用户的交互事件（比如点击事件）呢？

二、事件循环

javascript_asyc.jpg

我们通过上图来更加形象的了解Javascript的异步机制。
执行同步任务 -> 检查任务队列中是否有任务 -> [有如果则执行] -> 检查任务队列中是否有任务 -> [有如果则执行] -> ......
可见主线程在执行完同步任务之后，会无限循环地去检查任务队列中是否有新的“任务”，如果有则执行。而这些任务包括我们在异步任务中定义的回调函数，也包括用户交互事件的回调函数。通过事件循环，Javascript不仅很好的处理了异步任务，也很好的完成了与用户交互事件的处理。因为在完成异步任务的回调函数之后，任务队列中的任务都是由事件所产生的，因此我们也把上述的循环过程叫做事件循环。

三、异步机制实践

console.log('定时器去买菜吧')
setTimeout(function(){
    console.log('菜买完了，主线程去做菜吧')
}, 0)
console.log('你先去买菜，我先看个世界杯')

在浏览器中执行上述代码，兴许能更好地理解Javascript的异步机制。

四、宏任务与微任务

宏任务：script、setTimeout、setInterval、setImmediate、I/O、UI rendering
微任务：Promise(原生)、process.nextTick
执行顺序：
事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。
观察者优先级：
idle观察者 > I/O观察者 > check观察者。
idle观察者：process.nextTick
I/O观察者：一般性的I/O回调，如网络，文件，数据库I/O等
check观察者：setImmediate，setTimeout

setTimeout(() => {
    console.log('timeout')
})
new Promise(function(resolve) {
    console.log('promise')
    resolve()
}).then(() => {
    console.log('then')
})
console.log('main')

执行顺序是：
promise、main、then、timeout

五、总结

总而言之，Javascript单线程的背后有浏览器的其他线程为其完成异步服务，这些异步任务为了和主线程通信，通过将回调函数推入到任务队列等待执行。主线程所做的就是执行完同步任务后，通过事件循环，不断地检查并执行任务队列中回调函数。