In The Event Loop by Jake Archibald: In The Loop

The timing of running code and rending is tightly defined.

In JS, the event loop determines why things run in the order they do.

The main thread, where the bulk of stuff happens - Where rendering happens - Where the DOM lives

JavaScript is single threaded single concurrent language. As a result, it can only handle one task or a piece of code at a time. Yet, we order JavaScript to do a number of things at a time, and the event loop orchestrate these orders. It even got its name because of how it is implemented this orchestration of tasks to have a smooth operation. This implementation resembles.

while (queue.waitForMessage()) {

    queue.processNextMessage();
}

queue.waitForMessage() waits synchronously for a message to arrive if there is none currently.1 Each message is processed completely before any other message is processed. This offers some nice properties when reasoning about your program, including the fact that whenever a function runs, it cannot be pre-empted and will run entirely before any other code runs (and can modify data the function manipulates). This differs from C, for instance, where if a function runs in a thread, it can be stopped at any point to run some other code in another thread. A downside of this model is that if a message takes too long to complete, the web application is unable to process user interactions like click or scroll. The browser mitigates this with the "a script is taking too long to run" dialog. A good practice to follow is to make message processing short and if possible cut down one message into several messages.

Example:

setTimeout(callback, ms)

When setTImeout is called it follows the following steps.

1. Run the following steps in parallel:
    a. Wait ms milliseconds,
    b. Queue a task to run the following steps:
        i. Invoke callback

Task Queues

When we queue a task the event loop takes a detour. Because the browser would inform the JS that there is a job to do and the event loop would schedule the task using the task queue. The event loop prioritizes tasks above all else.

Three type of task queue

1. Tasks,
2. Animation callbacks
3. Microtasks

The render steps

What the browser uses to update what is on the screen. It is another detour that involves a style calculation.

1. Style,
2. Layout,
3. Pixel data.

The even loop schedules rendering after tasks. As a result of a code like the one below, would make the browser stack

button.addEventListener("click", event => {
    while(true);
});

Once the user clicks the button, the event loop would be informed about this task. However, the task is never-ending and hence any rendering that comes after this is screwed. How about this

function loop() {
    setTimeout(loop, 0);
}
loop();

setTImeout loop is not rendered blocking. The above loop doesn't block anything because each task of running the loop is performed separately and the browser has time to render.

This is just the highlight of this must watch the video where Jake Archibald gives much more examples

Subscribe for coding videos

Keep growing professionally with just three curated videos weekly.

We hate spam as much as you do.