JavaScript Engine: Event Loop

Introduction

Event loop is a very important concept because it handles many different tasks in our day to day jobs, for exmaple: when we use setTimeout or Promise , it handles the order of execution.

Event loop is also a high frequency interview problem.

So it is worth to learn How Event Loop works.

Terms

Event Loop: Provided by browers or NodeJs runtime. An infinite Event Loop to check if there is next task to excute or render.

Task queue(macro tasks) Provided by browers or NodeJs runtime. For queuing callbacks of Browers’ setTimeout or setInterval, etc

Micro tasks queue(promises) Provided by browers or NodeJs runtime. For queuing callbacks of thenable promises.

RequestAnimationFrame Queue Provided by browers runtime. For queueing callbacks of requestAnimationFrame. Excute before rendering.

Call Stack Provided by browers or NodeJs runtime. Functions executed are pushed into this stack.

The Steps of JavaScript Engine Execution

1. Execute javaScrip script
2. Push function calls to Call Stack
3. If encounter setTimeout or setInterval, execute them and push the callback to the task queue
4. If encounter resolved promises and it has a .then callback, push it into micro task queue
5. Script execution ends.
6. Execute functions in Call Stack until it is empty
7. Event loop checks if there are tasks in the micro task queue
8. If micro task queue is not empty, select one task and push it into Call Stack to execute until micro task queue is empty
9. Execute functions in Call Stack until it is empty
10. Event loop checks if there is any change on layout or styles. If there is, calculate and render html layout, styles
11. Event loop checks if there are tasks in the task queue
12. If the task queue is not empty, select one task and push it into Call Stack to execute
13. Execute functions in Call Stack until it is empty
14. Go back to step 7

footnote 1 :

When JavaScript is executing, it blocks other operations, for example: rendering, so anything changing html layout or styles won’t happen during the execution time.

Footnote 2:

Browsers doesn’t care how many times you change a button color or text in a <p> element, it only takes the last color to render.

Footnote 3:

Clicking a button to trigger two listener’s callbacks in a web page is different than calling button.click() during script execution.

Here is a online demo.

For example:

1. Click on a web page

button.addEventListener('click', () => {
  new Promise((resolve) => resolve()).then(() => console.log('Micro Task 2'));
  console.log('Listener 2');
});
// The log:
// Listener 1
// Micro Task 1
// Listener 2
// Micro Task 2

1. Directly invoke click() method

button.addEventListener('click', () => {
  new Promise((resolve) => resolve()).then(() => console.log('Micro Task 2'));
  console.log('Listener 2');
});
button.click()
// The log:
// Listener 1
// Listener 2
// Micro Task 1
// Micro Task 2

Reference:

Jake Archibald on the web browser event loop, setTimeout, micro tasks, requestAnimationFrame, …