深入理解 JavaScript 之事件循环(Event Loop)

1、JavaScript 是单线程的

JS 是一门单线程的非阻塞的脚本语言，这表示在同一时刻最多也只有一个代码段执行。

2、为什么 JavaScript 是单线程的

这是由其执行的环境是浏览器环境所决定的。

试想一下如果 JavaScript 是多线程语言的话，那么当两个线程同时对 Dom 节点进行操作的时候，则可能会出现有歧义的问题，例如一个线程操作的是在一个 Dom 节点中添加内容，另一个线程操作的是删除该 Dom 节点，那么应该以哪个线程为准呢？

所以 JavaScript 作为浏览器的脚本语言，其设计只能是单线程的。

3、同步和异步

同步

• 指在 主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。

• 也就是调用一旦开始，必须这个调用 返回结果才能继续往后执行。程序的执行顺序和任务排列顺序是一致的。

异步

• 异步任务是指不进入主线程，而进入 任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。

• 每一个任务有一个或多个 回调函数。前一个任务结束后，不是执行后一个任务,而是执行回调函数，后一个任务则是不等前一个任务结束就执行。

• 程序的执行顺序和任务的排列顺序是不一致的，异步的。

• 我们常用的setTimeout和setInterval函数，Ajax都是异步操作。

4、JS 如何处理异步任务

JS 是单线程，那么非阻塞怎么体现呢？

如果 JS 是阻塞的，那么 JS 发起一个异步 IO 请求，在等待结果返回的这个时间段，后面的代码就无法执行了，而 JS 主线程和渲染进程是互斥的，因此可能造成浏览器假死的状态。

事实 JS 是非阻塞的，那它要怎么实现异步任务呢，靠的就是事件循环。

5、事件循环机制

5.1 什么是事件循环机制？

js引擎线程只会执行执行栈中的事件，执行栈中的代码执行完毕，就会读取事件队列中的事件并添加到执行栈中继续执行，这样Loop循环反复就是Event Loop。

5.2 js的事件分为两种

（1）宏任务

• 整体代码script
• setTimeout
• setInterval
• setImmediate()-Node
• requestAnimationFrame()-浏览器

（2）微任务

• Promise.then()
• process.nextTick()–Node
• catch
• finally
• Object.observe
• MutationObserver

5.3 执行顺序

1. 先执行主线程

2. 遇到宏队列（macrotask）放到宏队列（macrotask）

3. 遇到微队列（microtask）放到微队列（microtask）

4. 主线程执行完毕

5. 执行微队列（microtask），微队列（microtask）执行完毕

6. 执行一次宏队列（macrotask）中的一个任务，执行完毕

7. 执行微队列（microtask），执行完毕

8. 依次循环。。。

6、经典题目

async/await、promise、setTimeout的执行顺序

async function async1() {
	console.log('async1 start');
	await async2();
	console.log('asnyc1 end');
}
async function async2() {
	console.log('async2');
}
console.log('script start');
setTimeout(() => {
	console.log('setTimeOut');
}, 0);
async1();
new Promise(function (reslove) {
	console.log('promise1');
	reslove();
}).then(function () {
	console.log('promise2');
})
console.log('script end');

① 先执行async 关键字函数的外部代码。前两个async1()/async2()是正常的函数声明，往下看执行console.log(‘script start’)，输出script start；

②执行setTimeout，setTimeout是一个异步任务，放入宏任务的异步队列中。等时间到了，主线程空闲才会去调用。

③执行async1()，输出async1 start 继续向下执行。

④执行async2()，输出async2，并且返回一个promise对象，await让出线程，把返回的promise放入微任务异步队列，并且阻塞async内部代码的执行，即console.log(‘async1 end’)，且async1()后面的代码要等待上面完成。

⑤执行new Promise，输出promise1，然后将resolve()放入微任务的异步队列。

⑥执行 console.log(‘script end’)，输出script end。

⑦到这里同步代码全部执行完成，接着去异步任务队列获取任务，先微任务Event Queue再宏任务Event Queue

⑧执行resolve，这个resolve是async2返回的promise返回的，输出async1 end

⑨执行resolve，这个resolve是new Promise的，输出promise2

⑩微任务异步队列执行完，执行宏任务异步队列的setTimeout，输出setTimeOut

参考资料

1. 彻底搞懂js事件循环机制/js异步编程