What the heck is the event loop anyway? | Philip Roberts | JSConf EU
JSConf
youtube· 26:38standard
1.Introduction to the Event Loop
0:00 / 0:27The speaker, Philip Roberts, introduces himself and the topic of the event loop in JavaScript. He shares his personal journey of understanding how JavaScript truly works beyond surface-level knowledge.
- Event Loop
- JavaScript
What's inside this course
- 0:00
1. Introduction to the Event Loop
The speaker, Philip Roberts, introduces himself and the topic of the event loop in JavaScript. He shares his personal journey of understanding how JavaScript truly works beyond surface-level knowledge.
- 0:27
2. Initial Confusion and Key Terms
Philip recounts his initial confusion with JavaScript's core concepts like V8, single-threaded nature, and callbacks. He lists several technical terms that often lead to misunderstanding for new developers.
- 1:42
3. Understanding JavaScript's Environment
Philip explains that V8 only handles memory allocation (heap) and the call stack. He reveals that common asynchronous features like setTimeout and DOM manipulation are not part of V8 itself, but are provided by the browser as 'Web APIs'.
- 3:58
4. JavaScript's Single-Threaded Nature
This chapter clarifies that JavaScript is single-threaded, meaning it has only one call stack and can execute only one piece of code at a time. This fundamental characteristic is crucial for understanding its concurrency model.
- 5:04
5. Visualizing the Call Stack
Philip uses a code example with `multiply`, `square`, and `printSquare` functions to visually demonstrate how the call stack works. Functions are pushed onto the stack when called and popped off when they return.
- 6:38
6. Call Stack Errors and Memory Leaks
The speaker illustrates how errors are reported with a full stack trace in the browser. He also explains how an infinitely recursive function can lead to a 'maximum call stack size exceeded' error, which is a form of memory leak.
- 8:00
7. Understanding Blocking Operations
Philip defines 'blocking' as any code that takes a long time to execute on the call stack, preventing other code from running. Examples include long loops, network requests, and image downloads.
- 9:20
8. Synchronous AJAX Example
Using a synchronous AJAX request as an example, Philip demonstrates how a slow operation can block the entire call stack. The program waits for each request to complete before moving to the next, leading to a frozen UI.
- 10:02
9. Browser Blocking Demonstration
A live demonstration shows how a blocking `while` loop freezes the browser UI, preventing any interaction or rendering. This highlights the critical problem that JavaScript's single-threaded nature poses for user experience.
- 11:00
10. Introducing Asynchronous Callbacks
To prevent blocking, JavaScript uses asynchronous callbacks. These functions are executed at a later time, allowing the main thread to remain free and the UI to stay responsive. This is a core concept for non-blocking operations.
- 11:50
11. setTimeout Example with Call Stack
Philip uses a `setTimeout` example to illustrate how asynchronous code works. The `setTimeout` callback is not immediately pushed to the call stack but is scheduled to run later, after the current synchronous code finishes.
- 12:50
12. Browser's Role in Concurrency
The speaker clarifies that while JavaScript is single-threaded, the browser provides Web APIs (like `setTimeout`, DOM, AJAX) that are effectively multi-threaded. These APIs handle concurrent operations outside the JavaScript runtime.
- 14:00
13. Web APIs and the Callback Queue
This chapter details how Web APIs interact with the callback queue. When an asynchronous operation (like `setTimeout`) completes, its callback is pushed onto the callback queue, waiting for the call stack to be empty.
- 15:50
14. The Event Loop's Simple Job
The event loop's primary function is explained: it continuously checks if the call stack is empty. If it is, the event loop takes the first callback from the callback queue and pushes it onto the call stack for execution.
- 17:00
15. setTimeout(0) Explained
The common pattern of `setTimeout(0)` is demystified. It doesn't execute immediately but rather pushes the callback to the queue, ensuring it runs after all current synchronous code on the call stack has completed.
- 18:20
16. AJAX Request Flow with Event Loop
Philip applies the event loop model to an AJAX request. The request is handled by Web APIs, and once completed, its callback is placed in the queue, eventually executed by the event loop when the stack is clear.
- 19:30
17. Interactive Event Loop Visualization
The speaker introduces 'Loupe', a tool he built to visualize the JavaScript runtime environment. He demonstrates how DOM events and `setTimeout` calls are processed through the Web APIs, callback queue, and event loop.
- 21:20
18. setTimeout Delay is Minimum, Not Exact
This chapter highlights that the delay specified in `setTimeout` is a minimum delay, not a guaranteed execution time. The callback will only run after the specified time AND when the call stack is empty, which might be later.
- 22:30
19. Synchronous vs. Asynchronous Callbacks
Philip distinguishes between synchronous callbacks (like those in `forEach`) and asynchronous callbacks. He demonstrates how to create an asynchronous `forEach` using `setTimeout(0)` to avoid blocking the main thread.
- 24:00
20. Browser Rendering and the Event Loop
The speaker explains that the browser tries to repaint the screen every 16.6ms (60fps) but is constrained by the JavaScript call stack. Rendering only occurs when the stack is clear, and it has a higher priority than other callbacks.
- 25:00
21. Blocking Rendering with Synchronous Code
A demonstration shows how a slow synchronous loop blocks browser rendering, making the UI unresponsive. This reinforces the importance of keeping the call stack clear to maintain a smooth user experience.
- 25:50
22. Don't Block the Event Loop
The core message is to avoid blocking the event loop by keeping the call stack clear of long-running synchronous tasks. This ensures the browser can perform necessary operations like rendering and responding to user input, creating a fluid UI.
Every chapter ends with a checkpoint (quiz, flashcards, retell, diagram, or prediction) and the course closes with a final boss-fight. More courses →