JS event loop mechanism (event loop) macro task and micro task

Concept: synchronous task and asynchronous task

First of all, we must know that javascript is a single-threaded language. JS tasks need to be queued and executed in order. If a task takes too long, the subsequent tasks can only wait. Tasks that consume time are called asynchronous tasks, and tasks that execute immediately are called synchronous tasks.
insert image description here
This process is that synchronous and asynchronous tasks enter different execution "places", synchronously enter the main thread, and asynchronously enter the Event Table and register functions. When the specified thing is completed, Event Table will move this function into the task queue (Event Queue). When the task in the main thread is empty after execution, go to the task queue (Event Queue) to read the corresponding function and enter the main thread for execution.

The above process will be repeated continuously, which is often called Event Loop (event loop)

Summarize:

1) All synchronization tasks are executed on the main thread, forming an execution stack.
2) In addition to the main thread, there is also a task queue. As long as the asynchronous task has a running result, a time stamp is implanted in the task queue.
3) After the main thread completes all tasks (the execution stack is cleared), it will read the task queue, first execute the micro task queue and then execute the macro task queue.
4) Repeat the above three steps.

As long as the main thread is empty, the task queue will be read. This is the operating mechanism of js, also known as event loop (event loop).

Asynchronous tasks include: macro tasks and micro tasks:

1. Macro task
setTimeout
setInterval
I/O
event
postMessage
setImmediate (a feature in node, the browser has abandoned this API)
requestAnimationFrame
UI rendering
2. Micro task
Promise.then
MutationObserver
process.nextTick (in node)

Asynchronous task execution order:

1. Execution order of macrotasks and microtasks on the main thread Execution order
: main thread >> microtasks created on the main thread >> macrotasks created on the main thread

console.log('---start---');//第一轮主线程
 
setTimeout(() => {
    
    
  console.log('setTimeout');  // 将回调代码放入个宏任务队列，第二轮宏任务执行
}, 0);
 
new Promise((resolve, reject) => {
    
    
  console.log('---Promise第一轮微任务同步执行---');//第一轮微任务同步执行
  resolve()
}).then(()=>{
    
    
  console.log('Promise.then实例成功回调执行'); // 将回调代码放入微任务队列，第一轮宏任务执行完后立即执行
});
 
console.log('---end---');//第一轮主线程结束

insert image description here
2. Macro tasks contain micro tasks

// 宏任务队列 1
setTimeout(() => {
    
    
  // 宏任务队列 2.1
  console.log('timer_1');
  setTimeout(() => {
    
    
    // 宏任务队列 3
    console.log('timer_3')
  }, 0)
  new Promise(resolve => {
    
    
    resolve()
    console.log('new promise')
  }).then(() => {
    
    
    // 微任务队列 1
    console.log('promise then')
  })
}, 0)
 
setTimeout(() => {
    
    
  // 宏任务队列 2.2
  console.log('timer_2')
}, 0)
console.log('========== Sync queue ==========')

insert image description here
3. Function call in asynchronous task
The function call is synchronous, and the function will not be executed if it is not called.

//请写出输出内容
   async function async1() {
    
    
       console.log('async1 start'); //2
       await async2(); 
     //  await async2（）会把后边的东西延后 (放到异步队列里面) 本身先执行 后面跟的是 转化为promise
       console.log('async1 end'); //6
   }
   async function async2() {
    
    
       console.log('async2');  //3
   }
   
   console.log('script start'); //1
   
   setTimeout(function() {
    
    
       console.log('setTimeout'); //8
   }, 0)
   
   async1();
   
   new Promise(function(resolve) {
    
    
       console.log('promise1'); //4
       resolve();
   }).then(function() {
    
    
       console.log('promise2'); //7
   });
   console.log('script end'); //5