What exactly is the Event Loop in JavaScript? | CodeSketched

Code Sketched

7 May 202205:33

Summary

TLDR本视频介绍了JavaScript中的事件循环概念，并解释了其如何与堆栈、堆和消息队列等关键概念相互作用。首先，通过详细说明函数堆栈的工作原理，阐述了如何处理函数调用及其返回。接着，介绍了堆和堆栈之间的关系，及对象在内存中的存储方式。视频进一步解释了消息队列的作用及其如何处理事件，最终揭示了事件循环如何协调这一切，确保事件驱动模型的高效运行。通过这些概念，观众能够更好地理解JavaScript中的异步行为。

Takeaways

😀 事件循环是 JavaScript 引擎负责执行代码、处理事件和执行排队任务的运行时模型。
😀 JavaScript 执行过程依赖于三个主要概念：堆栈、堆和队列。
😀 堆栈是用于存储函数调用的结构，每个执行的函数都会创建一个栈帧。
😀 每当一个函数调用另一个函数时，新的栈帧会被压入堆栈，执行完成后会从堆栈中弹出。
😀 堆是内存中的一个大块区域，用于存储对象的实际数据，而函数的引用会存储在堆栈中。
😀 队列是一个消息队列，存储着等待被处理的消息，每条消息都与一个函数处理程序相关联。
😀 事件循环会不断检查消息队列是否为空，如果有消息，它会依次执行其中的函数。
😀 事件循环遵循“执行完成”的原则，即当前执行的函数会运行到结束，不会被中断。
😀 例如，长时间运行的同步代码可能会导致浏览器冻结，出现“脚本运行时间过长”的提示。
😀 事件处理程序会通过事件触发将消息添加到队列，例如按钮点击或 `setTimeout`。
😀 即使 `setTimeout` 设置为0秒，函数仍需等到队列中的其他任务执行完才能被执行。

Q & A

什么是事件循环（Event Loop）？
-事件循环是一种运行时模型，负责执行代码、处理事件和执行排队的子任务。它是一个理论模型，JavaScript 引擎根据该模型来实现 JavaScript 的执行方式。
堆栈（Stack）在事件循环中扮演什么角色？
-堆栈用于存储每个函数的调用。每当一个函数执行时，它的调用帧会被推入堆栈中。函数执行完毕后，帧会从堆栈中弹出。
堆（Heap）和堆栈有什么区别？
-堆是一个大型的无结构内存区域，用于存储对象，而堆栈用于存储函数调用的局部变量。对象的引用存储在堆栈帧中，但实际对象存储在堆中。
队列（Queue）在事件循环中是如何工作的？
-队列是一个消息队列，存储待处理的消息。每个消息都有一个关联的函数，事件循环会依次处理队列中的消息，执行相应的函数。
什么是“运行至完成”概念？
-运行至完成意味着一个函数在执行过程中不会被其他优先级更高的函数打断。函数必须执行完毕才能继续执行其他函数。这就是为什么有时浏览器会显示‘脚本运行时间过长’的提示。
事件循环如何执行队列中的消息？
-事件循环会同步等待消息被加入到消息队列中。一旦队列中有消息，它会按顺序处理队列中的消息，执行关联的函数，并将其推入堆栈中，直到所有函数执行完毕。
如何将消息添加到消息队列中？
-当事件发生时，并且事件上有事件处理程序时，消息就会被添加到消息队列中。例如，当按钮被点击时，‘onClick’事件处理程序就会被加入到消息队列。
setTimeout 的行为是什么？
-setTimeout 接受两个参数：要执行的函数和延迟时间。它并不保证函数会在指定的延迟时间后立即执行，而是将其添加到消息队列中，等待队列中的其他消息先执行。
setTimeout 设定为 0 秒会发生什么？
-即使 setTimeout 的延迟时间为 0 秒，函数也不会立即执行。它仍然会被添加到消息队列中，并等待队列中其他函数执行完毕后才会被处理。
事件循环如何确保 JavaScript 的顺畅运行？
-事件循环通过将函数从消息队列中取出并执行，确保 JavaScript 的事件驱动模型流畅运行。这使得异步事件和函数可以按预期顺序执行，而不会导致浏览器卡顿。