返回
JS执行引擎详解：揭秘Event Loop事件循环机制
前端
2023-09-18 07:02:09
但凡是做前端的，应该都知道 Javascript 有多么重要，纵观目前的主流技术栈，像什么 Vue, React，Node 都是基于 Javascript 的，那这里必须提到一个点 Javascript 的执行机制。
Javascript 的执行机制是一个非常重要的概念，它决定了 Javascript 代码是如何执行的。了解 Javascript 的执行机制，可以帮助我们更好的理解 Javascript 代码的执行过程，以及如何优化我们的代码。
Javascript 的执行机制
Javascript 的执行机制主要由以下几个部分组成：
- 调用栈（Call Stack） ：调用栈是一个后进先出（LIFO）的数据结构，它存储了当前正在执行的函数。当一个函数被调用时，它就会被压入调用栈。当函数执行完毕时，它就会从调用栈中弹出。
- 事件队列（Event Queue） ：事件队列是一个先进先出（FIFO）的数据结构，它存储了等待执行的事件。当一个事件被触发时，它就会被添加到事件队列中。当调用栈为空时，事件队列中的事件就会被依次执行。
- 消息队列（Message Queue） ：消息队列是一个先进先出（FIFO）的数据结构，它存储了等待执行的异步任务。当一个异步任务被触发时，它就会被添加到消息队列中。当调用栈和事件队列都为空时，消息队列中的异步任务就会被依次执行。
Javascript 的执行过程
Javascript 的执行过程大致如下：
- 当一个 Javascript 程序被执行时，它会首先被编译成字节码。
- 字节码被解释器解释成机器码。
- 机器码被 CPU 执行。
- 当一个函数被调用时，它就会被压入调用栈。
- 当函数执行完毕时，它就会从调用栈中弹出。
- 当调用栈为空时，事件队列中的事件就会被依次执行。
- 当事件队列和调用栈都为空时，消息队列中的异步任务就会被依次执行。
同步任务和异步任务
Javascript 中的任务可以分为同步任务和异步任务。同步任务是指那些必须在当前调用栈中执行的任务，而异步任务是指那些可以在当前调用栈执行完毕后才执行的任务。
同步任务包括：
- 函数调用
- 变量声明
- 赋值操作
- 算术运算
- 逻辑运算
- 比较运算
- 返回语句
异步任务包括：
- setTimeout()
- setInterval()
- I/O 操作
- 网络请求
- DOM 事件
宏任务和微任务
在 Javascript 中，任务还可以分为宏任务和微任务。宏任务是指那些需要在当前调用栈和事件队列都为空时才执行的任务，而微任务是指那些可以在当前调用栈和事件队列都为空时立即执行的任务。
宏任务包括：
- setTimeout()
- setInterval()
- I/O 操作
- 网络请求
微任务包括：
- Promise.then()
- MutationObserver()
- queueMicrotask()
Event Loop 的运行机制
Event Loop 的运行机制大致如下：
- 首先，Javascript 引擎会检查调用栈中是否有任务需要执行。如果有，则执行该任务。
- 如果调用栈中没有任务需要执行，则 Javascript 引擎会检查事件队列中是否有事件需要执行。如果有，则执行该事件。
- 如果事件队列中也没有事件需要执行，则 Javascript 引擎会检查消息队列中是否有异步任务需要执行。如果有，则执行该异步任务。
- 如果调用栈、事件队列和消息队列都为空，则 Event Loop 会进入休眠状态，等待新的任务或事件到来。
总结
Javascript 的执行机制是一个非常复杂的概念，但它是理解 Javascript 代码执行过程的基础。了解 Javascript 的执行机制，可以帮助我们更好的理解 Javascript 代码的执行过程，以及如何优化我们的代码。
