JavaScript macro task, micro task

Before understanding macro tasks and micro tasks, we need to know some basic concepts of JS running mechanism

JS operation mechanism

  1. JS is single threaded execution
function person() {
function play() {
function swim() {
	throw new Error('error')

A man is going to play and then go swimming. He is in danger

When reporting an error, follow the principle of first in and last out. This is the characteristic of the stack - that is, the execution stack
2. JS generally runs in the browser or Node
3. How does JS work?
Event cycle mechanism

In the Event Loop, each cycle is called a tick. The tasks of each tick are as follows:

  • The execution stack selects the macro task (generally script) that enters the queue first, and executes its synchronization code until the end;
  • Check whether there is a micro task. If yes, it will be executed to the micro task queue is empty;
  • If the host is a browser, the page may be rendered;
  • Start the next round of tick and execute the asynchronous code (setTimeout and other callbacks) in the macro task.

Expand $nextTick in Vue

vm.$nextTick accepts a callback function as a parameter to delay the callback until after the next DOM update cycle.

This API is implemented based on event loops.
"Next DOM update cycle" means to update the DOM the next time the micro task executes, and vm.$nextTick means to add the callback function to the micro task (it will be degraded to a macro task in special cases).
For more Node.js event loops, see: Node.js event loop, timer and process.nextTick()

What are macro tasks and micro tasks

Macro task and micro task

Basic concepts

  1. In the ES6 specification, microtask is called jobs and macrotask is called task
  2. Macro tasks are initiated by the host, while micro tasks are initiated by JavaScript itself.
  3. Macro is a term for batch processing
Macro task (macro)micro task
Who initiated ithostJavaScript
Specific eventsscript, setTimeout, setInterval, I/O, etc. then, catch, finally process.nextTick (Node.js), etc. (new Promise is not a micro task)
Will it trigger a new round of Tickmeetingcan't

Execution procedure:

  • Each macro task is individually associated with a micro task queue
  • The execution sequence is: main thread > micro task > macro task [popular memory method: start with small things]

Generation of micro tasks

  • In ES3 and previous versions, JavaScript itself does not have the ability to initiate asynchronous requests, so there is no micro task.
  • After ES5, Promise was introduced into JavaScript, so that the JavaScript engine itself can initiate asynchronous tasks without a browser.

[problem] both macro task and micro task can operate asynchronously. What is the problem to be solved by micro task?
[answer] in order to solve the problem of too long waiting time for asynchronous callback when there are too many main thread tasks, an effective trade-off can be made between real-time and efficiency



      setTimeout(() => {

      new Promise(resolve => {
      }).then(() => {
      }).finally(() => {


Output: 136452

  1. Sequential execution, output 1
  2. Execute the setTimeout macro application and enter the macro task queue
  3. Execute Promise output 3
  4. . then. Finally the micro application enters the micro application queue (this is related to the event loop mechanism)
  5. Sequential execution, output 6
  6. The micro application executes faster than the macro application, so output 451

Speaking of Promise, I can't help thinking of async await in Vue, which turns asynchronous into synchronous

On async await

console.log('script start')

async function async1() {
  await async2()
  console.log('async1 end')
async function async2() {
  console.log('async2 end')

setTimeout(function() {
}, 0)

new Promise(resolve => {
  .then(function() {
  .then(function() {

console.log('script end')

What is your expected answer? The correct answer is as follows:

script start
 async2 end
script end
async1 end

The most unexpected position for you should be async1 end. Why is he in this position again?

async function async1() {
  await async2()
  console.log('async1 end')
async function async2() {
  console.log('async2 end')

To ES5:

new Promise((resolve, reject) => {
  // console.log('async2 end')
}).then(() => {
 // Execute the statement after the async1() function await
  console.log('async1 end')

I can't help seeing the output in the micro task. then

Recommended articles

What are macro tasks and micro tasks?
Node.js event loop, timer and process.nextTick()

Tags: Javascript node.js Vue.js

Posted by agisthos on Mon, 20 Sep 2021 14:22:47 +0530