How Does the Browser Execute Asynchronous Code?

How JavaScript works with browser APIs, explained step-by-step

Photo by Goran Ivos on Unsplash

This article explains, step-by-step, how the JavaScript engine works and interacts with browser APIs to be able to execute asynchronous code without blocking the normal thread of execution.

First things first. This is not a quick read. I try to use day-to-day examples to help you understand how it all works but expect this to require a substantial chunk of your time if you want to read it and understand it all.

I based my article on the courses I took from Kyle and Will Sentance.

JavaScript Engine and Browser APIs

Let's start by describing some parts of the JavaScript engine and the way they interact with the browser. Don't worry if it sounds like too much information at first.

I hope that, by the time you read the examples that follow them, everything will make sense. And, you can always come back here and re-read some parts.

As you may know, the JavaScript engine is single-threaded. This means that only one command can be performed at the same time. The design of JavaScript is based on that.

Diagram showing the JavaScript engine components and browser's APIs

• “Memory” is where functions and variables are allocated.
• “Call stack” is used by the JavaScript engine to know what code to execute next. Whatever is on the top of the stack is what is currently being executed.
• The “Event Loop” checks on the job queues and, whenever the call stack is empty, pops the code from them and pushes it onto the call stack to be executed.

The two queues to handle asynchronous code:

• The callback queue.
• The micro-task queue which is used by promises. Please see more on job queues here.

JavaScript's Execution

There are two parts to the code’s execution process. I want to introduce some terms.

The thread of execution

Also called the first half of the program.

It's the first parsing and executing the code line-by-line, as the code appears. It allocates variables and functions, and the code is executed in an execution context. (This part is executed synchronously)

Deferred code execution

Also called the second half of the program.

This code is executed at some point in time after we have gone through the normal thread of execution. This happens, for example, if we call setTimeout, or wait for API request data to come back from a server. We shouldn't block the JavaScript thread of execution in the time we wait.

Web APIs

The browser provides some features that contribute to the execution of asynchronous code without blocking the thread. These features are known as web APIs (browser).

You might recognize several of them, like the timer, where the setTimeout and setInterval methods live, the XMLHttpRequest which is used by the fetch method, the Console API, the DOM, and the web storage API. Some of them are shown in the diagram.

Execution of Code: setTimeout and Promises

I want to illustrate the concepts with the help of simple examples, so I will explain in detail what happens when we call setTimeout and, next, I will go through a rather similar scenario using Promises.

Example: setTimeout

Let’s examine this case, with a simple daily-life scenario. In my routine, when I wake up in the morning, the second thing I need after kissing my daughter is a cup of coffee.

So, the plan is drinking coffee, right?

I turn on the coffee machine and press Espresso. To make this example simpler, let’s assume that it is guaranteed that the coffee machine always takes the same exact amount of time to make the coffee and that is only 60000ms (1 minute).

So, we “ask” the coffee machine to start preparing it for us. Note that I am not the one doing this, but an external mechanism is doing it for me. In the meantime, I can do other things, like writing a text to a friend.

When the machine finishes preparing our coffee, it tells us that is ready. We don’t need to start drinking it immediately, meaning that we can finish whatever we are doing at the moment and leave the act of drinking the coffee to a later moment.

Actions like “having the intention of drinking coffee”, “push the button on the machine to start preparing coffee” and “writing a text to a friend” are things that happen in the first half of the program.

To be precise, the proper act of "drinking coffee" is something that is deferred and happens at some point later in the future, in the second half of the program.

Let’s put it into code:

Simple code of drinking coffee

Step-by-step timeline

To make things simpler, let’s assume that each instruction takes 1ms to execute, so we can see how they happen, millisecond-by-millisecond.

Follow the slides that will take you to every step in the execution.

Asynchronous execution of setTimeout

But, what happens with Promises?

In JavaScript, a Promise object represents a placeholder for future data.

For example, when we call the fetch function to make a request to the server, there are two things that happen at that moment:

1. A Promise object is created.
2. The fetch command requests a web API that lives in the browser to solve something for it.

When a Promise object is created, the code is executed with the help of the web APIs in the browser.

The .then() method attaches the callbacks we want to be called after the value property is set. These methods are registered internally. Once the promises have value set, it calls all the registered methods.

Example: Promise

Let’s go back to our daily-life routine again, to make an analogy. I am having coffee again but, this time, I am getting it in a coffee shop. I order a “latte macchiato” from the person at the counter. This person gives me a ticket with a number as a promise that, in the future, I will get the coffee.

I have the intention of “drinking a latte macchiato” when I get the coffee. This is a deferred action that will happen in the future.

There are several orders before mine, so I will have to wait until it's ready. Later, at some point, the waiter will bring it to my table. In the meantime, I can do other things, so I decided to continue with my Medium article.

“Asking for the coffee”, “getting the ticket” and “writing my article” happens in the first part of the program.

In the future, when the coffee is ready, the waiter brings me the latte macchiato. But, I still need to finish writing my last paragraph and only then I can proceed with drinking my coffee.

The act of “drinking latte macchiato” happens in the second part of the program, only when I have the coffee ready.

Let’s put it into code:

Step-by-step timeline

To make things simpler, let’s assume each instruction takes 1ms to execute, so we can see how they happen millisecond-by-millisecond.

Follow the slides that will take you to every step in the execution.

Asynchronous execution of Promises

Conclusion

We started with the basic concepts, the JavaScript engine components and the code execution happening in the first half and second half of the program.

We then discussed, with a very simple example, the way setTimeout works by putting that into a timeline. We also went through a similar example using Promises.

Despite these being tricky concepts, I hope I was able to make them simple enough for easy understanding. It is important to master them to avoid issues at the moment of writing asynchronous code.

Thanks for reading!

Resources

1. Kyle Simpson "Rethinking Asynchronous JavaScript" (March 29, 2016).
2. Will Sentance "JavaScript: The New Hard Parts" (July 10, 2018).