js中的event loop

同步任务： 同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务，当我们打开网站时，网站的渲染过程，比如元素的渲染，其实就是一个同步任务。
异步任务：异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程，当我们打开网站时，像图片的加载，音乐的加载，其实就是一个异步任务

js是一门单线程语言，所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。如果一个任务耗时过长，那么后面的任务就必须一直等待下去，会拖延整个程序，常见浏览器无反应，可能就是一段代码死循环，造成程序卡住在这个位置，无法继续。

为了解决这个问题，js的执行模式分为两种：同步和异步。

js的异步和多线程的实现是通过event loop来实现的

event loop

event loop开始时会从全局代码开始一行一行执行，函数调用会被压入调用栈中，被压入的函数叫做帧

image.png

当函数返回后会从调用栈中退出
比如这段代码，执行时先把func2压入调用栈中执行里面的代码

image.png

遇到console.log(2)把它压入栈中并执行输出2

image.png

然后console.log(2)弹出

image.png

然后func(1)被压入栈中并执行里面的代码

image.png

console.log(1)被压入栈执行并输出1

image.png

然后弹出

image.png

然后func1执行完毕弹出

image.png

然后console.log(3)被压入栈中执行并弹出

image.png

这时整个调用栈被清空

image.png

现在加入异步操作，setTimeout执行时压入到栈中，console.log(2)进入消息队列，会在调用栈清空的时候执行

image.png

然后func1压入栈中执行代码，console.log(1)压入栈中执行后弹出，func1弹出，
然后console.log(3)被压入栈中执行并弹出

image.png

这时调用栈为空，消息队列中的消息会被压入栈中执行

image.png

image.png

使用promise和async await创建的异步操作会被加入到微任务队列中，它会在调用栈清空的时候立即执行，并且处理期间加入的微任务也会一起执行
例如下面这段代码，new Promise会首先被压入调用栈中

image.png

然后里面的代码被压入栈中并执行，然后弹出

image.png

之后的步骤跟前面举例一样，我们直接跳到这里来看一看

image.png

之后p的回调函数会进入微任务队列

image.png

image.png

image.png

此时调用栈为空

image.png

然后执行微任务队列中的console.log(resolved)和console.log(6)

image.png

最后执行消息队列中的console.log(2)，清空调用栈

image.png

宏任务：

#	浏览器	Node
I/O	✅	✅
setTimeout	✅	✅
setInterval	✅	✅
setImmediate	❌	✅
requestAnimationFrame	✅	❌

微任务：

#	浏览器	Node
process.nextTick	❌	✅
MutationObserver	✅	❌
Promise.then catch finally	✅	✅