[转载]Event Loop

前言

Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

为啥要弄懂Event Loop

• 是要增加自己技术的深度，也就是懂得JavaScript的运行机制。

• 现在在前端领域各种技术层出不穷，掌握底层原理，可以让自己以不变，应万变。

• 应对各大互联网公司的面试，懂其原理，题目任其发挥。

事件循环

image.png image.png

• 浏览器分析JavaScript，如果是同步，则放入执行栈(stack)。
• 如果是异步，放入任务队列(callback queue)中。
• 当执行栈中的任务执行完之后，会去任务队列中看有没有任务，有则压入执行栈中。
• 不断重复上面的步骤，叫做事件循环。

异步任务内部如何顺序执行

在JavaScript中，异步任务被分为两种，一种宏任务（MacroTask）也叫Task，一种叫微任务（MicroTask）。

微任务会比宏任务先执行

• 宏观任务
  宿主发起的任务为宏观任务，如setTimeout、setInterval、setImmediate，I/O
• 微观任务
  JavaScript引擎发起的任务为微观任务,如Promise

每个宏观任务中又包含一个微观任务队列。setTimeout等宿主API，会添加宏观任务，Promise永远在队列尾部添加微观任务。

image.png

分析异步执行的方法

• 执行栈在执行完同步任务后，查看执行栈是否为空。
• 如果执行栈为空，就会去检查微任务(microTask)队列是否为空，微任务有任务就执行任务。如果微任务为空的话，就执行Task（宏任务）。
• 每次单个宏任务执行完毕后，检查微任务(microTask)队列是否为空，如果不为空的话，会按照先入先出的规则全部执行完微任务(microTask)后，设置微任务(microTask)队列为null，然后再执行宏任务，如此循环。

事件循环全过程

image.png

参考文章

深入理解javascript中的事件循环event-loop

JS事件循环

JavaScript 事件循环机制

一次弄懂Event Loop（彻底解决此类面试问题）

参考文章：宏观任务与微观任务