Detailed explanation of the concept of event loop mechanism in js

The content of this article is a detailed explanation of the concept of the event loop mechanism of js. It has a certain reference value. Friends in need can refer to it

Preface

In the process of reading Callbacks and Deferred, I often encounter the concept of asynchronous programming. Asynchronous programming is closely related to the event loop mechanism. I had little understanding of event loops and asynchronous programming before. So take some time to sort out the knowledge related to event loops and asynchronous programming.

1. Heap, Stack, Queue

Heap (Heap): Objects are allocated in a heap, an area used to represent an unorganized area in memory . We know that functions are first-class objects, and functions are "callable objects". Therefore, before the function is called, the JavaScript engine will perform compilation (lexical analysis, syntax analysis, code generation) on the function. When compilation is completed, the function (here is not limited to functions, all JavaScript objects are objects, except undefined and null) will be put into the heap, memory space will be allocated, and it will wait for execution or call.

Stack (Stack): When a function is called, an "execution stack" will be formed.

Task Queue: (Queue): A JavaScript runtime contains a queue of messages to be processed. Every message is associated with a function. When the stack has enough memory, a message is taken from the queue for processing. This processing involves calling the function associated with the message (and thus creating an initial stack frame). When the stack is empty again, it means that message processing is complete. After all synchronous tasks in the main thread are executed, the asynchronous tasks in the task queue are read. This process is cyclic. Therefore, the entire operating mechanism is called Event Loop.
Synchronous tasks refers to tasks queued for execution on the main thread. The next task will not be executed until the previous task is executed; Asynchronous tasks refers to tasks that are not For tasks that enter the main thread and enter the task queue, only after all synchronous tasks on the main thread have been executed, the main thread will read the task queue and start executing asynchronous tasks.

2. Understand the event loop in the browser

    demo1    function A(){
         console.log("2");
    }
    console.log("1");

    setTimeout(A，1000);

    console.log("3");    //output:
    //1
    //3
    //2

    demo2
    function A(){
         console.log("2");
    }
    console.log("1");

    setTimeout(A，0);

    console.log("3");    //output:
    //1
    //3
    //2

The running process of demo1 is roughly like this:
- console.log("1") Enter the execution stack, output 1, and pop out of the stack after execution is completed
- setTimeout(A, 1000) Enter the execution stack, pop the stack, and at the same time put A into the asynchronous queue after 1s -
console.log("3") Enter the execution stack, output 3, and pop out of the stack after execution is completed - At this point
Synchronous queue (main thread queue) has been completed, start checking whether there are still tasks in the asynchronous queue - A enters the execution stack, outputs
2, and pops out of the stack. The running process of

demo2 is roughly like this: -
console.log("1") Enter the execution stack, output 1, and pop out of the stack after execution is completed -
setTimeout(A, 1000) Enter the execution stack, pop the stack, and immediately put A into the asynchronous queue -
console.log("3") Enter the execution stack, output 3, and pop out of the stack after the execution is completed - At this point
Synchronous queue (main thread queue) has been completed, start checking whether there are still tasks in the asynchronous queue - A enters the execution stack, outputs
2, and pops out of the stack.

Which operations need to be put into the asynchronous queue, and which operations belong to the synchronous queue? You can refer to the picture below. For a more specific classification, please see the next article js event loop mechanism (2)

3. Reference article

1. In-depth understanding of JavaScript event loop ( 1) — event loop

2.MDN concurrency model and event loop

3.What the heck is the event loop anyway?

4. Detailed explanation of JavaScript operating mechanism: Let’s talk about Event Loop again

The above is the detailed content of Detailed explanation of the concept of event loop mechanism in js. For more information, please follow other related articles on the PHP Chinese website!