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

This article mainly explains "what microtasks are in javascript", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let Xiaobian take you to learn "what microtasks are in javascript"!

In javascript, microtasks include: 1."Promise";2."Object.observe";3."MutationObserver";4."process.nextTick" in Node.js environment;5."async/await".

Operating environment of this tutorial: Windows 7 system, Javascript version 1.8.5, Dell G3 computer.

event loop

One of the characteristics of JavaScript is that it is single-threaded, meaning that only one thing can be done at a time. In order to coordinate events, user interactions, scripts, UI rendering, and network processing, and prevent non-blocking of the main thread, the scheme of Event Loop is applied. Event Loop consists of two classes: one based on Browsing Context and one based on Worker. The two run independently, that is, each JavaScript running "thread environment" has a separate Event Loop, and each Web Worker also has a separate Event Loop.

The event loops covered in this article are based on Browsing Context.

task queue

According to the specification, the event loop is coordinated through the mechanism of task queues. In an Event Loop, there can be one or more task queues, and a task queue is a collection of ordered tasks; each task has a task source, and tasks originating from the same task source must be placed in the same task queue, while tasks from different sources are added to different queues. APIs such as setTimeout/Promise are the source of the task, and what enters the task queue is the specific execution task specified by them.

In the event loop, each loop operation is called tick, and the task processing model of each tick is relatively complex, but the key steps are as follows:

In this tick, select the task (oldest task) that enters the queue first. If yes, execute it (once).

Check if Microtasks exist and if so keep executing until the Microtasks Queue is empty

Update render

The main thread repeats the above steps

There are a few things you need to know about the appeal tick:

JS is divided into synchronous tasks and asynchronous tasks

Synchronous tasks are executed on the main thread, forming an execution stack

Outside of the main thread, the event-triggered thread manages a task queue in which it places an event whenever an asynchronous task has a run result.

Once all synchronous tasks in the stack have been executed (JS engine idle), the system reads the task queue, adds runnable asynchronous tasks to the stack, and starts execution.

macro task

(macro)task, it can be understood that each time the code executed by the execution stack is a macro task (including getting an event callback from the event queue and putting it into the execution stack for execution).

In order to enable the JS internal (macro)task and DOM task to be executed in an orderly manner, the browser will re-render the page after the execution of one (macro)task and before the execution of the next (macro)task. The process is as follows:

(macro)task-> Rendering->(macro)task->...

Macro tasks include:

script(whole code)setTimeoutsetIntervalI/OUI interactive event postMessageChannelsetImmediate (Node.js environment)

micro-task

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, before rendering.

So its response time is faster than setTimeout (setTimeout is task) because there is no need to wait for rendering. That is, after a macrotask is executed, all microtasks generated during its execution are executed (before rendering).

Microtasks include:

PromiseObject.observeMutationObserverprocess.nextTick(Node.js environment)async/await

operation mechanism

In the event loop, each loop operation is called tick, and the task processing model of each tick is relatively complex, but the key steps are as follows:

Execute a macro task (if not on the stack, get it from the event queue)

If a microtask is encountered during execution, it is added to the task queue of the microtask

Immediately execute all microtasks in the current microtask queue (in turn) after the macro task is completed

When the current macro task finishes, start checking the rendering, then the GUI thread takes over rendering

After rendering, JS thread continues to take over and starts the next macro task (retrieved from event queue)

As shown in the figure:

At this point, I believe that everyone has a deeper understanding of "what microtasks are in javascript", may wish to actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

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.