About the difference between the three, first of all to understand the JS operation mechanism, JS is a single thread, can only do one thing at a time, single thread means that all tasks need to queue, the previous task is finished, the next task can be executed. Therefore, all tasks are divided into two types, one is synchronous task, the other is asynchronous task synchronous task: a task queued on the main thread can be executed only after the previous one is completed: Asynchronous tasks are tasks that do not enter the main thread but enter the task queue (Task). Only when the task queue notifies the main thread that a task is ready for execution, the task will enter the main thread for execution

All synchronous tasks are executed on the main thread, forming an execution stack and there’s a task queue outside of the main thread, and as soon as the asynchronous task has a result, an event is put in the task queue and once all the synchronous tasks in the execution stack are executed, the system reads the task queue to see what’s in it. Those corresponding asynchronous tasks then end the wait state, enter the execution stack, and start executing the main thread repeating step 3 above

Task queue

A task queue is a queue of events. When a task is completed, an event is added to the task queue, indicating that the related asynchronous tasks can enter the execution stack. Inside the main thread reads a task queue, it is read what are the events in the task queue, apart from the IO device time, also includes some user generated events (mouse click, page scrolling, etc.), the callback function, which is the main thread is hanging code, asynchronous tasks must specify the callback function, when the main thread start asynchronous tasks, Is to execute the corresponding callback function

Event loop

The main thread reads events from the task queue in a continuous Loop, so the whole operation mechanism is also called Event Loop

Macro task

Macro task micro task is not a subset of asynchronous task, but in addition to synchronous asynchronous, a broader classification of stack tasks. Macrotask can be understood as a macrotask (including fetching an event callback from the event queue and putting it into the execution stack each time). In order to enable the orderly execution of macrotask and DOM tasks within JS, the browser will execute macrotask and DOM tasks after the completion of a macrotask execution. Before the next MacroTask execution begins, the page is rerendered as follows:

Macrotask – > render – > macrotask – >…

Macro tasks include: Script, setTimeout, setInterval I/O, UI interaction events, postMessage, MessageChannel, setImmediate(node.js environment)

Micro tasks

A microtask is a task that is executed immediately after the execution of the current task. That is, after the current task, before the next task, and before rendering. So it responds faster than setTimeout (setTimeout is task) because there is no need to wait for rendering. That is, after a macroTask has been executed, all microTasks created during its execution have been executed (before rendering).

Microtasks include: Promise.then, Object.observe, MutaionObserver, process.nexttick (Node.js environment)

Promise

Promise itself is a synchronous, immediate function, and when you execute resolve or Reject in Excutor, it is an asynchronous operation. Then /catch takes precedence, and resolve/ Reject is executed when the main stack is complete

console.log('js start')
new Promise((resolve,reject) = > {
  console.log('promise start')
  resolve()
  console.log('promise end')
}).then(() = > {
  console.log('promise then')})setTimeout(() = > {
  console.log('timeout')},0)
console.log('js end')
// js start > promise start > promise end >js End > promise then > timeout
// New Promise() is a synchronous immediate execution function
The callback to promise.then() is a task
// Promise is Resolved or Rejected, then the task is put in the microtask queue of the current event loop
// The promise is pending and the task is placed in the macro task queue of the event loop
Copy the code

async/await

Async function is a return Promise object. When the function is executed, once it encounters await, it will return first. After the triggered asynchronous operation is completed, the following statement “await” in the executing function means waiting, that is, async function needs to wait for the function to execute after await and has returned the result. To proceed with the following code, await the synchronization effect by returning a Promise object

async function async1(){
  console.log('async1 start')
  await async2()
  console.log('async1 end')}async function async2(){
  console.log('async2 end')}console.log('script start')
// Async1 returns a Promise. A Promise is a synchronous immediate execution function
async1()
console.log('script end')
// script start > async1 start > async2 end > async1 end > script end
Copy the code