Event Loop Event Loop

Program two threads are provided: one for running itself, called the "main thread"; the other to the main thread and other processes (mainly a variety of I / O operations) in the communication, is called "Event Loop thread" (can be translated as "message thread").

All the tasks can be divided into two, one is a synchronization task (Synchronous), the other is asynchronous task (asynchronous). Synchronization task means that queued for execution on the main thread task, only the first task is finished to a task after execution; asynchronous tasks mean, do not enter the main thread, and enter the "Task Queue" (task queue) of tasks, only "task queue" notify the main thread, an asynchronous tasks can be carried out, the task will enter the main thread.

Event loop specific process is:

Synchronization tasks into the main thread, asynchronous task into the Event Table and registration functions.
When the asynchronous task is completed, Event Table This function will be moved into the Event Queue.
Task execution in the main thread execution is completed stack is empty, go to Event Queue reads the corresponding function, enter the main thread.
The above process will be repeated, it is often said of Event Loop (event loop).

Specific examples:

console.log('Hi');
setTimeout(function() {
  console.log('callback');
}, 0);
console.log('Bye');

//Hi,Bye,callback

Event loop can not understand there is a motion picture to see this explanation: https://www.jb51.net/article/133424.htm

Macro and micro task task

In JavaScript, the task is divided into two types, one macro task (MacroTask), called micro-task (MicroTask).

MacroTask (macro task)

Host environment to provide the (browser and node)

scriptAll setTimeoutcode setInterval, .

MicroTask (micro tasks)

Standard language provided

Promise、await

Macro and micro task execution order of tasks:

Execution stack after executing synchronization task after viewing the execution stack is empty, if the execution stack is empty, it will check to micro task queue is empty, if empty, on the implementation of the macro task, otherwise performing all-time micro-tasks.
Every single macro task after the implementation, check the micro-task queue is empty, if not empty, it will follow the FIFO full implementation finished the regular micro-task after setting the micro-task queue null, and then perform the macro task , so cycle.

Summary: Synchronization -> Micro Tasks -> Macros task

Common types of asynchronous tasks

settimeout callback function into a macro task queue, wait until after the execution stack empty execution
promise itself is synchronized immediately execute the function (synchronous)
promise.then placed in the corresponding callback function macro task micro task queue, and other tasks inside the macro executing the synchronization code is then executed;
async function represents a function which may be asynchronous method, await followed by an expression, when the async method of execution, execution will experience await expression immediately, then the back of the await expression code into micro-tasks queue , so that the execution stack let the first synchronization code execution

new Promise(function(resolve){
    console.log('1');
    resolve();
}).then(function(){
    console.log('2')
});

setTimeout(function(){
    console.log('3')
});

console.log('4');
//1,4,2,3

Reference: https://www.cnblogs.com/dajuyiding/p/11355677.html

http://www.ruanyifeng.com/blog/2014/10/event-loop.html

JavaScript's event loop, the macro and micro-task mission