table of Contents

js single-threaded model

JavaScript is single-threaded, non-blocking a language, there is only one main thread, but can only perform one task.

js use single-threaded in order to simplify

js the stack, heap and message queues

Stack

It is stored in the calling function record - call frame

stack

It is stored in the object

message queue

Pending messages queues comprise
Each message is associated with a callback function to process the message.

Event Loop

What is the Event Loop Event Loop

Event Loop is a loop checking mechanism

When the main thread executing the task, will be to see if there is an asynchronous message queue task to meet the conditions (js tasks in the message queue is called asynchronous task).
If so, the asynchronous tasks become transferred to the main thread synchronization tasks, and then perform its associated callback function
Then continuous cycle, if the task is to perform the task queue all over, the program will end.

The main thread

Synchronous and asynchronous tasks Tasks

Synchronization task

Is not suspended, the task execution queue in the main thread

Asynchronous tasks

Tasks are divided into macro and micro-tasks

Macro task

Including:
including the overall Codescript、setTimeout、setInterval、setImmediate、I/O、UI rendering

Micro-task

include:
promise.then, process.nextTick(node中）

Macro task execution order before the micro-task

Process event loop

When the task execution, the first implementation as a whole code for this [macro task], after the main thread synchronization task emptied, check the micro task list, if not empty then added to the main thread one by one execution; after micro task list empty, execution of the macro task, If the macro task execution after completion of a micro-task list is not empty, then followed by the implementation of micro-task until the task micro-empty, then perform the macro task, this has been circulated to all task lists emptied end event loop.

Example:

console.log(1); //1.同步任务#1
setTimeout(function(){  //1.宏任务加入marcotask $1
    console.log(2);
    new Promise(function(resolve){ 
        console.log(3);
        setTimeout(function(){  //$3
            console.log(4);
        });
        resolve();
    }).then(function(){ //&2
        console.log(5);
    });
});
new Promise(function(resolve){  //1.promise 是同步任务！！！#2
        console.log(6);
        setTimeout(function(){  //1.加入宏任务队列 $2
            console.log(7);
        });
        resolve();
    }).then(function(){ //1.微任务加入microtask &1
        console.log(8);
    });
console.log(9); //1.同步任务#3

Results of 169,823,574

First # 1 perform synchronization tasks encountered setTimeoutmacro task $ 1 added to the macrotaskqueue, met promisefor the synchronization task # 2, direct execution, promisethe execution runs setTimeoutthe macro task $ 2, join macrotaskthe queue, met then()to join micro-task queue, and then synchronize tasks # 3 , the first end of the event loop;
case: output the result [169]
macrotask: $ 2 $. 1
Microtask:. 1 &
1 & performing micro task, task synchronization output [8], micro-empty queue, performs macrotask
Execution of the macro task $ 1, to perform synchronization task output [2], met promiseto carry out its synchronization tasks, output [3], encountered setTimeoutmacro task $ 3, join macrotask, meet then()& 2, adding microtask, $ 1 macro task is finished, microtaskis not empty, so Next to perform micro tasks.
Micro task execution task list: & 2, output [5], after the end of the queue is empty the micro, macro task execution
$ 2 macro task execution, output [7], execution ends
$ 3 macro task execution, output [4], execution ends
At this time, all queues empty, the end of the event loop.

Summary: The first macro to perform a task, then all micro-tasks under execution, and so on;

Synchronous and asynchronous event loop Event loop