eventLoop
事件循环(Event Loop)是用于管理和调度异步任务执行的一种机制,通常在浏览器中,也在其他 JavaScript 运行环境中存在。事件循环确保 JavaScript 单线程的执行模型下能够处理非阻塞的异步任务,以避免程序阻塞和提高性能。
js引擎遇到一个异步事件后并不会一直等待其返回结果,而是会将这个事件挂起(交给webapi处理),继续执行执行栈中的其他任务。当一个异步事件返回结果后(例如延时时间到了、ajax得到结果了等),js会将这个事件加入与当前执行栈不同的另一个队列,我们称之为任务(事件)队列。被放入任务队列不会立刻执行其回调,而是等待当前执行栈中的所有任务都执行完毕, 主线程处于闲置状态时,主线程会去查找事件队列是否有任务。如果有,那么主线程会从中取出排在第一位的事件,并把这个事件对应的回调放入执行栈中,然后执行其中的同步代码…,如此反复,这样就形成了一个无限的循环。这就是这个过程被称为“事件循环(Event Loop)”的原因。
事件循环的基本概念如下:
-
调用栈(Call Stack):JavaScript 中的代码执行是通过调用栈来管理的,它用于追踪函数调用的层次关系。当函数被调用时,它会被推入调用栈,当函数执行完毕后,将被从调用栈中弹出。
-
消息队列(Message Queue):消息队列用于存储异步任务的回调函数。当异步任务完成后,它们的回调函数会被推入消息队列。
-
事件循环(Event Loop):事件循环是一个循环,它不断地检查调用栈和消息队列。如果调用栈为空,事件循环会查看消息队列是否有待处理的任务。如果有,它会将任务的回调函数推入调用栈,然后执行该函数。
事件循环的流程可以简化为以下步骤:
- 检查调用栈是否为空。
- 如果调用栈为空,检查消息队列是否有待处理的任务。
- 如果有,将下一个任务的回调函数推入调用栈,并执行。
- 重复上述步骤。
这个机制确保了 JavaScript 在执行异步任务时不会阻塞主线程,从而保持了页面的响应性。常见的异步任务包括定时器回调、事件处理函数、网络请求等。
在浏览器中,事件循环也与 Web API(如DOM操作、Ajax请求)以及宿主环境(浏览器)紧密相关。当异步任务完成后,它们的回调函数会被添加到消息队列,然后由事件循环执行。
调用栈是什么?
调用栈(Call Stack)是 JavaScript 引擎用来追踪函数调用的一种数据结构。它以栈(Stack)的形式组织,遵循后进先出(Last-In-First-Out,LIFO)的原则。调用栈用于跟踪当前执行上下文(函数调用)的堆栈帧(Stack Frame)。
具体来说,调用栈有以下重要特性和作用:
-
函数调用的追踪:每当函数被调用时,一个新的堆栈帧被推入调用栈的顶部。这个堆栈帧包含了函数的参数、局部变量以及函数内部的代码等信息。
-
后进先出原则:调用栈遵循后进先出的原则,也就是最后进入的函数最先执行完毕并从栈顶弹出。这意味着函数调用的顺序是依次进栈和出栈的。
-
递归调用:递归函数调用时,每个递归调用都会创建一个新的堆栈帧,并推入栈顶。这些堆栈帧会一直保留,直到递归结束,然后按照 LIFO 原则一个个出栈。
-
错误追踪:当发生错误时,调用栈会提供有关错误发生位置的信息,这对于调试非常有帮助。错误消息通常包括堆栈跟踪,显示了错误发生的函数调用链。
以下是一个示例,展示了如何在 JavaScript 中使用调用栈:
function greet(name) {console.log(`Hello, ${name}!`);
}function sayHello() {greet("Alice");greet("Bob");
}sayHello();
在这个示例中,当 sayHello
被调用时,它会依次调用 greet("Alice")
和 greet("Bob")
。这两个函数的堆栈帧将被依次推入调用栈,然后依照 LIFO 原则执行完毕并出栈。