1.JavaScript is single-threaded

One of the great features of javascript is single-threading, which means that you can only do one thing at a time. This prevents one thread from updating a DOM node while another deletes it.

2. The asynchronous JavaScript

Since javascript is single-threaded, all the code can only be executed from the top down, which can cause a lot of trouble. If the previous line of code takes a long time to parse, it blocks the code below, which can lead to a poor user experience. So smart programmers came up with the idea of dividing tasks into synchronous and asynchronous.

  • When a task enters the execution stack, check whether it is synchronous or asynchronous. Synchronous tasks enter the main thread directly, while asynchronous tasks enter the main threadEvent Table.
  • When the main thread is done, it willEvent QueueRead the function of, into the main thread execution.
  • These processes are repeated over and over again, and this is calledEvent Loop(Event loop).

3. What is an asynchronous task

  • All timers operate asynchronously
  • Event bindings are asynchronous operations
  • In AJAX, we tend to do asynchronous operations
  • Callbacks can be understood as asynchronous (not strictly asynchronous)
console.log('开始')
setTimeout(()=>{
    console.log('In execution... ')
},2000)
console.log('the end')
Copy the code

Running result: Start End Executing…

  • The console. The log (' start ')As a synchronization task, directly put into the main thread;
  • SetTimeout () is an asynchronous taskEvent TableAnd register anonymous functions. When it was put in after two secondsEvent Queue;
  • The console. The log () 'end'Belongs to the synchronization task and is also placed on the main thread.
  • If the main thread completes within two seconds, the setTimeout () task will not be executed immediately, because only anonymous functions registered after two seconds will be pushedEvent QueueTo enter the main thread execution. Also, if the main thread task is not completed within two seconds,setTimeoutThe registered function is pushed toEvent QueueIt is not immediately called by the main thread.
setTimeout(() => {
    console.log('fine')
},2000)

sleep(10000)
console.log('ok');
Copy the code

Result: OK fine

  • console.log('fine')Enter theEvent TableRegister and start the timer.
  • Execute the sleep function;
  • Three seconds is up,setTimeoutComplete,task()Enter theEvent Queue, butsleepIt’s too slow. It’s not done yet. We have to wait. Sleep finally executed –console.log('ok')To perform;
  • task()Finally from theEvent QueueThe main thread is executed.

4. Macro versus micro tasks

Let’s start with an example:

setTimeout(()=>{
     console.log('Start execution')}); new Promise((resolve)=>{ resolve(console.log('Where am I?'));
 }).then(function(){
     console.log(I'm a then function.)}); console.log('It's finally over');
Copy the code

According to the above rules, we want the result of the execution to be: where do I finally end up

But what it actually does is it says, “Where do I end up? Do I start executing then?

WTH, is the execution order of asynchronous tasks, not sequential, but otherwise specified? In fact, the division between asynchronous and synchronous is not accurate. In addition to synchronous and asynchronous tasks in a broad sense, we also have a more detailed definition of tasks:

  • Macro-task: includes the entire code script, setTimeout, and setInterval
  • Micro-task: Promise, process.nexttick

According to the more detailed assignment of tasks above, the execution mechanism of JS is:

  • Execute a macro task, and place the microtask in the “event queue” of the microtask if it encounters a microtask.
  • After the current macro task is executed, check the “event queue” of the micro task and complete the execution of all the micro tasks in the event queue.
  • Enter the macro task “event queue” and continue the above steps.
console.log("begin");

setTimeout(()=>{
    console.log('Timer 1');
    process.nextTick(function() {
        console.log('nextTick1');
    })
})

new Promise(function(resolve) {
    resolve(console.log('outterP'));
}).then(function() {
    console.log('outterT');
})

setTimeout(()=>{
    console.log('Timer 2');
    process.nextTick(function() {
        console.log('nextTick2');
    })
    new Promise(function(resolve) {
    resolve(console.log('innerP'));
}).then(function() {
    console.log('innerT');
})
})

console.log('end');

Copy the code

The first event loop:

  • The wholescriptAs the first macro task enters the main thread, encounteredconsole.logTo print outbegin;
  • Meet the first onesetTimeout, the callback function inside is placed in the macro taskEvent Queue;
  • encounternew promise, directly execute, outputoutterP.thenFunctions are assigned to microtasks ·Event Queue·;
  • When the second ·setTimeout· is encountered, the callback function inside is placed in the macro taskEvent Queue;
  • To meet againconsole.log, then print outend;
  • Then perform microtasksEvent Queue, the implementation ofconsole.logPrint out theoutterT

Output of the first event loop: begin outterP end outterT;

The second event cycle:

  • Find the first macro task in the macro task queue.
  • encounterconsole.logA printoutThe timer 1
  • encounterprocess.nextTick, is placed in microtasksEvent Queue;
  • The second round of macro tasks is completed, followed by micro tasksEvent Queue, the implementation ofconsole.logPrint out thenextTick1

Output of the second event loop: timer 1 nextTick1;

The third event cycle:

  • Enter the macro task queue and find the first macro task.
  • encounterconsole.logTo print outThe timer 2;
  • encounterprocess.nextTick, and put its callback function on the microtaskEvent Queue;
  • encounternew promiseThe outputinnerPThat will bethenTo the microtaskEvent Queue;
  • After the third round of macro task execution is completed, the micro task queue is executed and output is generatednextTick2andinnerT;

Output of the third event loop: timer 2 innerP nextTick2 innerT

So the complete output is: begin outterP end outterT Timer 1 nextTick1 timer 2 innerP nextTick2 innerT

Reference links:

Read JavaScript engine, runtime, and stack calls

JS task queue

What are macro tasks and micro tasks?