EventLoop

[conan1992]

No description provided.

[conan1992]

EventLoop

主线程从消息队列里面取消息、执行消息，再取消息、再执行。当消息队列为空时，就会等待直到消息队列变成非空。而且主线程只有在将当前的消息执行完成后，才会去取下一个消息。这种机制就叫做事件循环机制，取一个消息并执行的过程叫做一次循环

宏任务和微任务

消息队列里又可区分为宏任务（MacroTak）和微任务（MicroTask）

• macroTask: setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering
• microTask: process.nextTick, Promise, Object.observe(已经废弃), MutationObserver

一次事件循环

简单来说就是先运行macroTask队列中的一个，然后运行microTask队列中的所有任务。接着开始下一次循环（只是针对macroTask和microTask，一次完整的事件循环会比这个复杂的多）。

具体过程

① Javascript内核加载代码到执行栈
② 执行栈依次执行主线程的同步任务，过程中若遇调用了异步Api则会添加回调事件到回调队列中。且微任务事件添加到微任务队列中，宏任务事件添加到宏任务队列中去。直到当前执行栈中代码执行完毕。
③ 开始执行当前所有微任务队列中的微任务回调事件。 (:smirk:注意是所有哦，相当于清空队列)
④ 取出宏任务队列中的第一条(先进先出原则哦)宏任务，放到执行栈中执行。
⑤ 执行当前执行栈中的宏任务，若此过程总又再遇到微任务或者宏任务，继续把微任务和宏任务进行各自队伍的入队操作，然后本轮的宏任务执行完后，又把本轮产生的微任务一次性出队都执行了。
⑥ 以上操作往复循环...就是我们平时说的eventLoop了
注

• 微任务队列操作，总是会一次性清空队列
• 宏任务队列每次只会取出一条任务到执行栈中执行

参考

• 理解同步、异步和事件循环
• 总是一知半解的Event Loop
• 浏览器 Javascript 的 EventLoop 动态图析