Analysis of Microtask and Macrotask in JS event cycle

  eventloop, javascript

brief introduction

In the last article“Analysis of EventLoop Event Cycle in JS”One mentioned inEvent QueueIn fact, there are two kinds of queue in the event cycle, and one is calledJob Queue

among them

Event QueueKnown in the HTML specification asTask Queue, but in order to distinguish, is generally calledMacrotask Queue
Job QueueIt is mentioned in the ECMAScript specification when dealing with Promise callbacks, but it is generally referred to as because it is similar to the implementation in V8.Microtask Queue

Macrotask

Macrotasks includes parsing HTML, generating DOM, executing main thread JS code and other events such as page loading, input, network events, timer events, etc. From the browser’s point of view, Macrotask represents some discrete and independent work.

Common applications
setTimeout,setInterval,setImmediate,requestAnimationFrame,I/O,UI rendering

Microtask

Microtasks is to complete some minor tasks to update the application state, such as processing the callback of Promise and DOM modification, so that these tasks can be executed before the browser re-renders. Microtask should be executed asynchronously as soon as possible, so their cost is less than Macrotask, and it can make us execute before UI rendering again, avoiding unnecessary UI rendering.

Common applications
process.nextTick,Promises,Object.observe,MutationObserver

Execution sequence

The implementation of Event Loop requires at least one Macrotask Queue and at least one Microtask Queue. For ease of understanding, we have all simplified into one.
In short, the Microtask Queue has a higher priority, that is, after executing a Microtask task, the entire Microtask Queue will be cleared, and if there is a new microtask added at this time, it will also be executed.

So let’s look at the following code:
图片描述

What is the order of execution?
We already know that setTimeout is a Macrotask, Promise is a Microtask, and this code is also a Macrotask executed from top to bottom.

Steps:

  1. Start execution,Execute script as a task into Macrotask QueueAt the same time, enter the call stack for execution.
  2. Line 1, outputscript start
  3. The setTimeout callback for Line 3 entered Macrotask Queue to wait.
  4. Line 7 callback enters Microtask Queue to wait.
  5. Line 13 outputscript endAt this point, the script execution is complete (i.e., a Macrotask is completed)
  6. Start executing the Microtask Queue, take out one of them and put it into the call stack for execution.
  7. Start executing Line 7 callback, which outputspromise1To return undefined
  8. The callback of Line 9 entered the Microtask Queue. Since the Microtask Queue is not empty, the callback is directly executed and outputpromise2Which returns undefined
  9. The Microtask Queue has been cleared (the browser can update the rendering UI at this time) and the task in the Macrotask Queue is put into the call stack for execution.
  10. Execute callback of Line 3, outputsetTimeout, Macrotask Queue empty
  11. Program execution completed

So the printing order is:

script start -> script end -> promise1 -> promise2 -> setTimeout

PS. The above code execution process, it is recommended to see the penultimate reference article of the original text, there is dynamic interaction can be practiced.

Summary

microtask-macrotask.png

  1. Microtask has a higher priority than Macrotask.
  2. Macrotask is always executed after JS code execution is complete and Microtask Queue is empty.
  3. JS code execution is itself a Macrotask
  4. The UI may be re-rendered after the Microtask Queue is emptied.
  5. Promise belongs to Microtask, setTimeout belongs to Macrotask.

The overall execution sequence is as follows:General code->promises->Events and setTimeout etc.

Reference article

Original link
ECMA262 Job Queues
HTML Standard Task Queue
HTML series: macrotask and microtask
microtask and macrotask a hands on approach
difference-between-microtask-and-macrotask-within-an-event-loop-context

Public number:Code force fully open
bVbrEUH?w=258&h=258