返回

再谈 Event Loop,这下别说你不会

前端

好的,以下是文章的内容:

一、JS 的运行机制

要了解 Event Loop,首先需要对 JavaScript 的运行机制有一个基本的了解。众所周知,JS 是一门单线程的非阻塞脚本语言。这也就是说,JS 只有一个执行线程,它一次只能执行一个任务。但是,JS 又是非阻塞的,这意味着它不会因为等待某个任务的执行结果而阻塞其他任务的执行。

1. 单线程

JS 是单线程的,这意味着它一次只能执行一个任务。这也就是说,JS 引擎只有一个执行栈,它一次只能执行一个函数。当一个函数被调用时,它会被压入执行栈。当函数执行完毕后,它会被从执行栈中弹出。

2. 非阻塞

JS 是非阻塞的,这意味着它不会因为等待某个任务的执行结果而阻塞其他任务的执行。这是因为 JS 引擎有一个任务队列,当一个任务需要等待时,它会被放入任务队列中。当执行栈空闲时,JS 引擎会从任务队列中取出一个任务并将其压入执行栈。

二、Event Loop

Event Loop 是 JavaScript 的核心机制之一,它负责协调各种任务的执行顺序。Event Loop 不断地从任务队列中取出任务并将其压入执行栈,然后执行这些任务。当执行栈空闲时,Event Loop 会检查是否有新的任务需要执行,如果有,则将其压入执行栈。

1. 任务队列

任务队列是一个先进先出的队列,它存储需要执行的任务。当一个任务需要等待时,它会被放入任务队列中。当执行栈空闲时,Event Loop 会从任务队列中取出一个任务并将其压入执行栈。

2. 消息队列

消息队列也是一个先进先出的队列,它存储来自浏览器的消息。当浏览器发生某些事件时,例如单击、鼠标移动、键盘输入等,它会向消息队列中添加一个消息。当执行栈空闲时,Event Loop 会从消息队列中取出一个消息并将其压入执行栈。

三、微任务和宏任务

在 JavaScript 中,任务分为两种类型:微任务和宏任务。微任务是指那些优先级更高的任务,它们会在宏任务之前被执行。宏任务是指那些优先级较低的任务,它们会在微任务之后被执行。

1. 微任务

微任务包括:Promise.then()、MutationObserver、process.nextTick() 等。

2. 宏任务

宏任务包括:setTimeout()、setInterval()、I/O 操作等。

四、总结

Event Loop 是 JavaScript 的核心机制之一,它负责协调各种任务的执行顺序。Event Loop 不断地从任务队列中取出任务并将其压入执行栈,然后执行这些任务。当执行栈空闲时,Event Loop 会检查是否有新的任务需要执行,如果有,则将其压入执行栈。

在 JavaScript 中,任务分为两种类型:微任务和宏任务。微任务是指那些优先级更高的任务,它们会在宏任务之前被执行。宏任务是指那些优先级较低的任务,它们会在微任务之后被执行。