What the heck is the event loop anyway? | Philip Roberts | JSConf EU

Key Takeaways #

1. JavaScript is single-threaded, meaning it can only execute one piece of code at a time This is different from languages that utilize threads.
2. The JavaScript runtime (like V8) works in conjunction with Web APIs to enable asynchronous behavior. Web APIs are provided by the browser and allow for tasks like network requests and timers to be handled concurrently.
3. The event loop is responsible for managing the communication between the JavaScript runtime and the callback queue. It continuously checks if the call stack is empty, and if so, takes the first item from the callback queue and pushes it onto the stack for execution.

Understanding the JavaScript Runtime #

• The JavaScript Runtime handles the actual execution of code. It consists of:
  • Heap: The memory area where objects are stored.
  • Call Stack: A data structure that keeps track of the active functions, allowing for proper function call and return order.
• JavaScript Runtime operates independently of Web APIs (provided by browser) such as DOM, AJAX, setTimeout etc.
• Web APIs are effectively threads that handle asynchronous tasks. They don't directly interact with the call stack but communicate with the callback queue.

The Role of the Event Loop #

• The event loop is the key to asynchronous behavior in JavaScript. It's a constant loop that monitors the call stack and the callback queue.
• The event loop ensures that the call stack is always empty before pushing a callback from the queue. This prevents blocking behavior and ensures a smooth user experience.

Blocking Behavior #

• Blocking behavior occurs when code is slow or takes a long time to execute. This can happen with things like network requests, image loading, or complex calculations.
• Blocking the call stack prevents the browser from performing other tasks, leading to a frozen user interface.
• The solution to blocking behavior is asynchronous programming. Instead of waiting for a task to finish, a callback function is provided that will run when the task is complete.

Async Callbacks and the Event Loop in Action #

• When an asynchronous function is called, it's handed off to a Web API.
• The Web API runs the task and then pushes the corresponding callback function onto the callback queue when it completes.
• The event loop constantly checks for empty call stacks, and when it finds one, it takes the first callback from the queue and places it onto the call stack for execution.
• This means that the callback function will only run after the call stack is empty, ensuring a non-blocking and efficient execution flow.

Examples of Asynchronous Behavior #

• setTimeout(function, delay): Starts a timer, and when the delay is complete, the callback function is pushed into the callback queue.
• AJAX (XMLHttpRequest): Makes a network request, and once the request completes, the callback function is added to the callback queue.
• Event Listeners (addEventListener): Attach an event handler to an element. When the event is triggered, the callback function associated with it is placed in the callback queue.

Don't Block the Event Loop! #

• Avoid slow or blocking operations on the call stack.
• Break down complex tasks into smaller, more manageable chunks.
• Use to defer execution until the call stack is empty.
• Use debouncing or throttling techniques to manage event handlers that could trigger many calls.

"The browser would like to repaint the screen every 16.6 milliseconds, 60 frame a second is ideal, that's the fastest it will do repaints if it can. But it's constrained by what you're doing in JavaScript for various reasons, so it can't actually do a render if there is code on the stack."

"Don't put shitty slow code on the stack because when you do that the browser can't do what it needs to do, create a nice fluid UI."

Summary for: Youtube