js的Event Loop机制解析

概述

最近看了一些异步的文章，有一些做者没有写代码也把错误的理解放上来。想一想，我也应该总结一些，以前面试也有过一道题目，虽说是考察异步，但其实就是考察异步当中的任务队列。给你一道题目，你以为会依次输出什么？

console.log('1')

Promise.resolve().then(() => console.log('2'))

setTimeout(() => {console.log('3'); Promise.resolve().then(() => console.log('4'))}, 0)

Promise.resolve().then(() => console.log('5'))

setTimeout(() => console.log('6'), 0)

console.log('7')

答案是

1 7 2 5 3 4 6

若是你知道为何会输出这些的话，那我想你没必要看下面了，由于你也有大概的理解，若是没有的话，我就跟你分析一下吧。

先看一张图吧，是拿别人的，有部分缘由也是由于他写的文章有错误，我才总结。

先理解这张图片吧，我简单介绍一下。

• 栈：主线程的函数执行，异步操做的执行放在了异步处理模块。
• 堆：用来存储引用类型的指向。
• 异步处理模块：主线程里面的异步模块。
• 任务队列：存储异步线程的执行队列。

而后，js运行就是运行主线程->运行任务队列

固然，这只是大概的介绍，真正的堆和栈并非和他说的同样，栈里面还有内存栈和调用栈，内存栈又有全局的内存栈，也有某个函数的内存栈，固然，函数内部的内存栈又放在了堆里面。这里面的栈，仅仅是表明了调用栈。

宏任务队列（macrotasks）

什么是宏任务队列？

宏任务队列macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering

上面的基本操做就是宏任务队列

微任务队列（microtasks）

微任务队列microtasks: process.nextTick, Promise, MutationObserver

上面的基本操做就是微任务队列

Event Loop

我就简单的说一下js里面执行顺序吧:

1. 执行主线程，若是有异步操做，则放到异步队列执行。执行2
2. 当主线程执行完毕，判断异步队列是否有微任务，若是有，则添加进去主线程执行；若是没有则将最新能够执行的宏任务加进主线程。返回1

是否是很简单？
那么上面那道题的结果无非就是

// 一开始，主线程
console.log('1');
console.log('7');

// 下一步，主线程
Promise.resolve().then(() => console.log('2'))

// 下一步，主线程
Promise.resolve().then(() => console.log('5'))

// 下一步，主线程
setTimeout(() => {console.log('3')}, 0)

// 下一步，主线程
Promise.resolve().then(() => console.log('4'))

// 下一步，主线程
setTimeout(() => console.log('6'), 0)

总结

看了一下不少文章，觉得很难，很想画图，可是在写的过程当中，发现其实真的很简单，只要好好了解js里面的引擎就行了，js仍是一个很强大的单线程语言。