浏览器机制之js事件循环

引言

总所周知，js是单线程的。单线程意味着，js代码在执行的任何时候，都只有一个主线程来处理所有的任务（为了避免多线程可能产生的诸多问题，直接阉割多线程的可能性）。然而，随着硬件设备的快速发展，网页要做的事情会变得越来越多。人们慢慢意识到，不能让单线程限制了js的效率，然后web worker便应运而生。

栈，堆，队列

基本数据结构知识略过~

讲讲它们在js语言层面的应用。

执行栈：函数调用形成了一个由若干帧（执行上下文）组成的栈。

消息队列：一个待处理消息的消息队列。每一个消息都关联着一个用以处理这个消息的回调函数。

在 事件循环 期间的某个时刻，运行时会从最先进入队列的消息开始处理队列中的消息。被处理的消息会被移出队列，并作为输入参数来调用与之关联的函数。正如前面所提到的，调用一个函数总是会为其创造一个新的栈帧。
函数的处理会一直进行到执行栈再次为空为止；然后事件循环将会处理队列中的下一个消息（如果还有的话）。

任务队列

在js事件循环机制中，存在多种任务队列，它们可分为宏任务（macro-task）和微任务（micro-task）两种。

• 宏任务包括：setTimeout、setInterval、I/O、UI rendering
• 微任务包括：process.nextTick、Promise、Object.observe（已废弃）、MutationObserver（html5新特性）

事件循环

如上图所示，事件循环就是在主线程清空执行上下文栈后空闲之时，先去微任务队列中读取待执行程序，并装载到主线程中。如果没有内容（各类微任务队列都清空），则将去宏任务队列中寻找。如此往复，周而复始，直至结束。

参考文档

并发模型与事件循环-MDN
详解JavaScript中的Event Loop（事件循环）机制-知乎
JS事件循环机制（event loop）之宏任务/微任务-掘金
JavaScript 事件循环机制-掘金

版权声明: （https://www.thinkmoon.cn/post/907）
本文首发于指尖魔法屋-浏览器机制之js事件循环
转载或引用必须申明原指尖魔法屋来源及源地址！