Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to carry out the analysis of JavaScript micro tasks and macro tasks. The content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Foreword:

Js is a single-threaded language, so it cannot be asynchronous by itself, but the host environment of js (such as browser, node) is multithreaded, and the host environment makes js have asynchronous properties in some way (event-driven). In js, we generally divide all tasks into two categories, one is synchronous tasks, the other is asynchronous tasks. In asynchronous tasks, there is a more detailed classification, that is, micro tasks and macro tasks.

1. Concept

1.1 Macro task

Macro tasks-setTimeout, setInterval, DOM events, AJAX requests

In order to enable the orderly execution of task and DOM tasks within JS, the browser will re-render the page (task- > render-> task- >) after the end of one task execution and before the next task execution begins. )

1.2 Micro Task

Micro tasks-Promise, async/await

Generally speaking, a microtask is a task that needs to be executed immediately after the execution of the current synchronous task, such as feedback on a series of actions, or the task needs to be executed asynchronously without assigning a new task. this reduces the performance overhead a little bit.

two。 Execution sequence

Let's take a look at a piece of code, and then discuss the order of execution:

Console.log (1) setTimeout (() = > {console.log (2)}) Promise.resolve () .then (() = > {console.log (3)}) console.log (4)

The result printed by the above code is 1 4 3 2. From the above code, we can see that the order of their execution is:

Execute the synchronous code first, put the asynchronous macro task into the macro task queue when you encounter the asynchronous macro task, and put the asynchronous micro task into the micro task list when you encounter the asynchronous micro task. After all the synchronous code has been executed, the asynchronous micro task is transferred from the list to the main thread for execution, and then the asynchronous macro task is transferred from the queue to the main thread for execution. All the way through until the completion of the mission.

Note: microtask execution precedes page rendering

3. Task relationship

Macro tasks are the mainstream. When js starts to be executed, it starts a macro task and executes one instruction in the macro task. Macro tasks can have multiple tasks at the same time, but will be executed one by one in order.

Each macro task can be followed by a micro-task queue, which can be executed first if there are instructions or methods in the micro-task queue. If not, proceed to the next macro task until all macro tasks are finished.

4. Detailed explanation of task

Why are there still micro tasks after there are macro tasks? That's because macro tasks take up too much performance, and when you need some early prepared methods to be executed at the end, and you don't want to add a macro task, you can put these methods in the micro-task queue one by one. after the code in the macro task is executed, the micro-task queue will be executed.

Therefore, the current synchronous code execution encounters an asynchronous task, if it is an asynchronous macro task, put it into the next round of macro task queue, which is an asynchronous micro task, and put it in the micro task queue to follow the current macro task. A micro task is equivalent to the small tail of a macro task, so when the current macro task is executed, the asynchronous micro task waiting behind it is immediately put into the queue to continue execution. On the other hand, the asynchronous macro task needs to wait until the next round, which results in the execution of the asynchronous micro task before the macro task.

This is the end of the analysis on how to carry out JavaScript micro-tasks and macro tasks. I hope the above content can be of some help and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.