Micro tasks, macro task order

Foreword

JS entire cycle in which there is only one ""

Understand how the conceptual issues of micro tasks, macro task

Macro task requires multiple cycles to execute the event finished, the micro-task is performed once finished;

2. Macro Task macrotask:

(In the event queue every event is a macrotask)

Priority: Main block> setImmediate> MessageChannel> setTimeout / setInterval

For example: setImmediate specified callback function, always ahead of setTimeout

3. Micro tasks include:

Priority: process.nextTick> Promise> MutationObserver

Need to pay more attention to process.nextTick is always greater than promise.then,

The reason is simple

In the Node, _tickCallback after the completion of each execution of a task TaskQueue the call, but in this _tickCallback essentially did two things:

1.nextTickQueue all tasks are performed off (maximum length 1e4, Node version v6.9.1)

2. The first step after the implementation of the Executive _runMicrotasks function, part (promise.then registered callback) microtask of execution

Pirates Photo:

But there is a js asynchronous mechanism, is experiencing macro task, the task before executing the macro, the macro task into eventqueue, and then perform micro tasks, the task into micro eventqueue,

Both queue is not a queue. When you take the time to start out in micro-task to get back out of this function, and then take a macro task from the task queue macro function back off.

This can be seen:

The presence of micro-task, then the implementation of all the micro-tasks
After performing micro tasks, implementation of a macro task,
1 cycle, 2

這樣可以总结一下如何分析异步执行的顺序：
首先我们分析有多少个宏任务；
在每个宏任务中，分析有多少个微任务；
根据调用次序，确定宏任务中的微任务执行次序；
根据宏任务的触发规则和调用次序，确定宏任务的执行次序；

下面做個測試：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        console.log('1');//
        setTimeout(function () {
            console.log('2');//
            new Promise(function (resolve) {
                console.log('3');//
                resolve();
            }).then(function () {
                console.log('4');//
            })
        }, 0);
        new Promise(function (resolve) {
            console.log('5');//
            resolve();
        }).then(function () {
            console.log('6');//
        });
        setTimeout(function () {
            console.log('7');//
            new Promise(function (resolve) {
                console.log('8');//
                resolve();
            }).then(function () {
                console.log('9');//
            });
        })
    </script>
</body>

</html>

测试结果为： 1->5->6->2->3->4->7->8->9

如果上面實在node 环境中

测试结果为： 1->5->6->2->3-->7->8->4->9

分析

setTimeout内部回调函数执行顺序在浏览器环境与node环境是有差异的。
1.浏览器环境是执行完seTimeout内部回调函数内容

\color{red}{（仅仅限于当前例子，如果setTimeout内部还有setTimeout等异步代码，那就另当别论）}

第一个setTimeout中的“2 3 4”先与第二个setTimeout中的“7 8 9”打印。
2.node环境中setTimeout内部如果还有异步操作，直接跳到下一个setTimeout回调代码中。至于两个setTimeout中promose.then内部的执行顺去取决于微任务的入队顺序

Micro tasks, macro task order

Foreword

分析

Guess you like