Execution principle of JS

1. Event Loop Event Loop Concept Introduction

Event Loop Event Loop is also called event queue, the two are a concept

The event loop refers to a parsing and execution rule of the compiler of the runtime environment (browser, nodejs) where the js code is located. The event loop does not belong to the category of the js code itself, but to the category of the js compiler. It is meaningless to discuss the event loop in js. In other words, js code can be understood as what a person does in the company, and the event loop is equivalent to a kind of rules and regulations of the company. The two are not the same concept.

2. Introduction to the concepts of micro-task and macro-task

Micro tasks and macro tasks belong to the category of js code
js code is mainly divided into two categories: synchronous code, asynchronous code
Asynchronous code is divided into: micro tasks and macro tasks

3. Event Loop Event Loop execution mechanism

1. Enter the script tag and enter the first event loop.

2. When encountering synchronous code, execute it immediately

3. When encountering a macro task, put it into the macro task queue.

4. When encountering microtasks, put them into the microtask queue.

5. Execute all synchronous code

6. Execute the microtask code

7. After the execution of the microtask code is completed, the queue is emptied this time.

Find the next macro task, repeat step 1

Repeat this until all macro tasks are cleared. This repeated execution mechanism is called the event loop.

Draw a diagram to describe the event loop

4. Error prone

(1). Promise itself is a synchronous code (just a container), only the callback in the then() method called after it is a microtask

(2). The expression on the right side of await will still be executed immediately, the code after the expression is the microtask, and the await microtask can be converted into an equivalent promise microtask analysis

(3). The script tag itself is a macro task. When multiple script tags appear on the page, the browser will parse the script tag as a macro task.

Seeing this, you should have some understanding of the event loop. Let me show you a few interview questions.

1. First execute log(1) on the main thread
2. When there are two awaits, only the code to the right of the first await will execute log(4) immediately, and the following lines of code will be put into the microtask queue.
3. Execute log(6) on the main thread
4. Execute the microtasks in lines 4 to 6

1. Execute 1, 5, 7 on the main thread first
2. After the synchronization task of the main thread is executed, the micro task will be executed first. Execute the code in the then method of Promise and print 6
3. After the micro task is executed, finally execute the macro task in the timer and print 2, 3, 4

1. First execute the synchronization code on the main thread, print 1
2. Execute the function on line 9 and enter the inside of async1. Async1 actually declares a promise. Promise is a synchronous code. It will execute and print 4 in the async2 function in sequence. Only the code in .then will be added to the micro Task queue, which is equivalent to adding the following code to a microtask queue after executing async2().
3. Go back to the main thread, encounter setTimeout(), and add it to the macro task queue
4. The main thread continues to execute backwards. As mentioned earlier, promise is synchronous code, and the callback after .then will be added to the microtask queue, so it will print 7 of 13 lines.
5. After the main thread is executed, it starts to execute the tasks in the microtask queue, following the principle of first-in, first-out, and prints the 2 in the fourth line. Then execute the code to the right of the second await on line 5 and print 5. Line 6 is added to the microtask queue at this time.
6. Then the second microtask will be executed, which is 16 lines of code, and print 8. The then on line 17 will also join the microtask queue at this time. Then execute the two microtasks on lines 6 and 17 in turn, printing 3 and 9
7. When the execution of the micro task ends, start the execution of the macro task setTimeout, and print 11 lines of 6.

All synchronization tasks are executed on the main thread, forming a call stack.
When an asynchronous task is encountered, enter the asynchronous processing module and register the callback function; when the specified event is completed (such as the ajax request response returns, setTimeout is delayed to the specified time), the asynchronous processing module will move the callback function into the asynchronous task queue.
When the code in the stack is executed and the tasks in the execution stack are empty, the main thread will first check whether there are tasks in the microtask queue, and if so, execute all tasks in the microtask queue in turn, until the microtask queue is Empty; then check whether there are tasks in the macro task queue, if so, take out the first macro task and add it to the execution stack, then empty the execution stack, check the micro tasks, and cycle until all tasks are executed. .

The above are some of my sorting and understanding of JS execution principles, hoping to bring some help to readers. If there is any misunderstanding or inappropriate expression, please correct me.

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00