In-depth understanding of JavaScript event execution mechanism

Preface

Being familiar with the event loop and understanding the browser's operating mechanism will be of great help to our understanding of JavaScript's execution process and troubleshooting of operating problems. The following is a summary of some principles and examples of browser event loops.

The principle of browser JS asynchronous execution

• JS is single-threaded, which means it can only do one thing at a time. So why can browsers execute asynchronous tasks at the same time?
• Because the browser is multi-threaded, when JS needs to perform an asynchronous task, the browser will start another thread to perform the task.
• In other words, JS is single-threaded, which means that there is only one thread that executes JS code, which is the JS engine thread (main thread) provided by the browser. There are also timer threads and HTTP request threads in the browser, which are not mainly used to run JS code.
• For example, if an AJAX request needs to be sent in the main thread, this task is handed over to another browser thread (HTTP request thread) to actually send the request. After the request comes back, the JS callback that needs to be executed in the callback is handed over to the JS engine thread for execution.
• That is, the browser is the one that actually performs the task of sending the request, and JS is only responsible for executing the final callback processing. So the asynchrony here is not implemented by JS itself, but is actually a capability provided by the browser.

The event loop in the browser

Execution stack and task queue

When JS parses a piece of code, it will sort the synchronous code in order in a certain place, that is, the execution stack , and then execute the functions in it one by one.
When an asynchronous task is encountered , it is handed over to other threads for processing. After all the synchronous codes in the current execution stack are executed, the callback of the completed asynchronous task will be taken out from a queue and added to the execution stack to continue execution.
When encountering an asynchronous task, it is handed over to other threads, and so on.
After other asynchronous tasks are completed, the callback is placed in the task queue to be executed.

Macrotasks and microtasks

Depending on the type of task, it can be divided into micro task queue and macro task queue.
During the event loop, after the synchronous code is executed, the execution stack will first check whether there is a task to be executed in the microtask queue. If not, it will check whether there is a task to be executed in the macrotask queue, and so on.
Microtasks are generally executed first in the current loop, while macrotasks will wait until the next loop. Therefore, microtasks are generally executed before macrotasks, and there is only one microtask queue, while there may be multiple macrotask queues. In addition, common events such as clicks and keyboard events also belong to macro tasks.

Common macro tasks:

• setTimeout()
• setInterval()
• UI interaction events
• postMessage
• setImmediate() -- nodeJs

Common microtasks:

• promise.then(), promise.catch()
• new MutaionObserver()
• process.nextTick() -- nodeJs

The following example:

console.log('Synchronous code 1');
setTimeout(() => {
    console.log('setTimeout')
}, 0)

new Promise((resolve) => {
  console.log('Synchronous code 2')
  resolve()
}).then(() => {
    console.log('promise.then')
})
console.log('Synchronous code 3');

// Final output: "Synchronous code 1", "Synchronous code 2", "Synchronous code 3", "promise.then", "setTimeout"

The specific analysis is as follows:

• Both setTimeout callbacks and promise.then are executed asynchronously and will be executed after all synchronous code;
• Although promise.then is written later, its execution order takes precedence over setTimeout because it is a microtask;
• New Promise is executed synchronously, while the callback in promise.then is asynchronous.

Note: If the setTimeout delay is set to 0 in the browser, it will default to 4ms, and 1ms in NodeJS.
The essential difference between microtasks and macrotasks:

• Macrotask characteristics: There are clear asynchronous tasks that need to be executed and called back; other asynchronous threads need to support them.
• Microtask characteristics: There are no explicit asynchronous tasks to be executed, only callbacks; no other asynchronous thread support is required.

Async/await execution order

Features

• The async declared function simply wraps the return of the function so that a promise object will be returned anyway (non-promise will be converted to promise{resolve}).
• The await statement can only be used in an async function.
  • When an async function is executed, if an await statement is encountered, the content after await will be executed according to the 'normal execution rules' first (note here that when an await statement is encountered again during the execution of the function content, the content of the await statement will be executed next).
  • After execution, it immediately jumps out of the async function to execute other contents of the main thread. After the main thread is executed, it returns to await to continue executing the following contents.

Example

const a = async () => {
  console.log("a");
  await b();
  await e();
};

const b = async () => {
  console.log("b start");
  await c();
  console.log("b end");
};

const c = async () => {
  console.log("c start");
  await d();
  console.log("c end");
};

const d = async () => {
  console.log("d");
};

const e = async () => {
  console.log("e");
};

console.log('start');
a();
console.log('end');

Operation Results

Personal analysis

• In the current synchronous environment, first execute console.log('start'); to output 'start'.
• When encountering a synchronous function a(), execute a().
• a() is a sync/await construct. When console.log("a") is encountered in the function, 'a' is output. When await is encountered, await b() is declared, which is an asynchronous function. Execution will be executed in function b(). (Similar operation, I thought of it myself) and push the content after await b() into the microtask queue. We can write it as [await b()].
• b() is a sync/await construct. When it is executed sequentially, it encounters console.log("c start") and outputs 'c start'. When it encounters the await declaration await c(), it is an asynchronous function and enters function c() for execution. And push the content after await c() into the microtask queue. We can remember it as [await c(), then await b()].
• c() is a sync/await construct. When it is executed sequentially, console.log("b start") is encountered and 'b start' is output. When it encounters the await statement await d(), which is an asynchronous function, it enters function d() for execution. And push the content after await d() into the microtask queue. We can remember it as [await d(), await c(), await b()].
• In d(), the sequential execution encounters console.log("") which outputs 'd', and the d() function ends.
• This is after d() is executed. There is no asynchronous function to execute. At this time, the synchronous environment is entered and the content after a() is executed.
• When console.log("end") is encountered, it outputs 'end'. At this time, the main thread in the synchronous environment is executed, and the microtask queue is checked to see if there are microtasks.
• There are microtasks in the microtask queue [after await d(), after await c(), after await b()], and the content after await d() is executed.
• The content after wait d() is console.log("c end"), which outputs 'c end'. At this point, the content is executed, and then check from the microtask queue [after await c(), after await b()] to execute the content after await c().
• The content after executing await c(), console.log("b end");, outputs 'b end'. At this point, the content is executed, and then check [after await b()] from the microtask queue to execute the content after await b().
• The content after await d() is await e(). When the await statement is encountered, e() is executed. And judge and there is no code to run after await e(), so there is no need to enter the task queue.
• Execute e(), then execute console.log("e"); in sequence, and output 'e'. The function ends at this point.
• There is no microtask in the microtask queue [], and the execution ends. Enter the synchronization environment.

This concludes this article on in-depth understanding of JavaScript’s event execution mechanism. For more relevant JavaScript event execution mechanism content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!