作者：卡特

转发链接：https://mp.weixin.qq.com/s/7g6hajYAvPBUQvGnPR3aag

前言

前一段小编也详细讲过关于JavaScript 的运行机制：「硬核JS」一次搞懂JS运行机制，纯文字化的理论，对于初学者来说很难去理解它。这次小编一起重温并且图形化+案例细说。

1. 单线程的JavaScript

js是单线程的，基于事件循环，非阻塞IO的。特点：处理I／O型的应用，不适合CPU运算密集型的应用。说明：事件循环中使用一个事件队列，在每个时间点上，系统只会处理一个事件，即使电脑有多个CPU核心，也无法同时并行的处理多个事件。因此，node.js在I／O型的应用中，给每一个输入输出定义一个回调函数，node.js会自动将其加入到事件轮询的处理队列里，当I／O操作完成后，这个回调函数会被触发，系统会继续处理其他的请求。

然而单线程不应该是自上而下按照顺序执行的吗？
下面的代码输出顺序就被打乱了

function fn(){
    console.log('start');
    setTimeout(()=>{
        console.log('setTimeout');
    },0);
    console.log('end');
}

fn() // 输出 start end setTimeout

2. JavaScript中的同步异步

js的同步异步是如何实现的?js中包含诸多创建异步的函数如:seTimeout，setInterval，dom事件，ajax，Promise，process.nextTick等函数

因为单线程，所以代码自上而下执行，所有代码被放到执行栈中执行；
遇到异步函数将回调函数添加到一个任务队列里面；
当执行栈中的代码执行完以后，会去循环任务队列里的函数;
将任务队列里的函数放到执行栈中执行;
如此往复，称为事件循环;

这样分析，上一段的代码就得到了合理的解释；
再来看一下这段代码；

function fn() {
    setTimeout(()=>{
        console.log('a');
    },0);
    new Promise((resolve)=>{
        console.log('b');
        resolve();
    }).then(()=>{
        console.log('c')
    });
}
fn() // b c a

3. 宏任务和微任务

两任务在同步异步中处于什么地位？两个任务分别处于任务队列中的宏队列与微队列中;宏队列与微队列组成了任务队列;任务队列将任务放入执行栈中执行

宏任务：

宏队列，macrotask，也叫tasks。异步任务的回调会依次进入macro task queue，等待后续被调用，这些异步任务包括：

setTimeout
setInterval
setImmediate (Node独有)
requestAnimationFrame (浏览器独有)
I/O
UI rendering (浏览器独有)

微任务：

微队列，microtask，也叫jobs。异步任务的回调会依次进入micro task queue，等待后续被调用，这些异步任务包括：

process.nextTick (Node独有)
Promise
Object.observe
MutationObserver

执行全局Script同步代码，这些同步代码有一些是同步语句，有一些是异步语句（比如setTimeout等）；
全局Script代码执行完毕后，执行栈Stack会清空；
从微队列中取出位于队首的回调任务，放入执行栈Stack中执行，执行完后微队列长度减1；
继续循环取出位于微队列的任务，放入执行栈Stack中执行，以此类推，直到直到把微任务执行完毕。注意，如果在执行微任务的过程中，又产生了微任务，那么会加入到微队列的末尾，也会在这个周期被调用执行；
微队列中的所有微任务都执行完毕，此时微队列为空队列，执行栈Stack也为空；
取出宏队列中的任务，放入执行栈Stack中执行；
执行完毕后，执行栈Stack为空；
重复第3-7个步骤；

以上才是一个完整的事件循环

来一个稍微复杂点的代码

function fn(){
    console.log(1);
    
    setTimeout(() => {
        console.log(2);
        Promise.resolve().then(() => {
            console.log(3);
        });
    },0);
    
    new Promise((resolve, reject) => {
        console.log(4);
        resolve(5);
    }).then(data => {
        console.log(data);
    });
    
    setTimeout(() => {
        console.log(6);
    },0);
    
    console.log(7);
}
fn(); //

流程重现

执行函数同步语句；

step1console.log(1);执行栈：[ console ]宏任务：[]微任务：[]打印结果：1
step2setTimeout(() => {
// 这个回调函数叫做callback1，setTimeout属于宏任务，所以放到宏队列中
console.log(2);
Promise.resolve().then(() => {
console.log(3)
});
});执行栈：[ setTimeout ]宏任务：[ callback1 ]微任务：[]打印结果：1
step3new Promise((resolve, reject) => {
// 注意，这里是同步执行的
console.log(4);
resolve(5)
}).then((data) => {
// 这个回调函数叫做callback2，promise属于微任务，所以放到微队列中
console.log(data);
});执行栈：[ promise ]宏任务：[ callback1 ]微任务：[ callback2 ]打印结果：14
step4setTimeout(() => {
// 这个回调函数叫做callback3，setTimeout属于宏任务，所以放到宏队列中
console.log(6);
})执行栈：[ setTimeout ]宏任务：[ callback1 , callback3 ]微任务：[ callback2 ]打印结果：14
step5console.log(7)执行栈：[ console ]宏任务：[ callback1 , callback3 ]微任务：[ callback2 ]打印结果：147

同步语句执行完毕，从微队列中依次取出任务执行，直到微队列为空

step6console.log(data) // 这里data是Promise的成功参数为5执行栈：[ callback2 ]宏任务：[ callback1 , callback3 ]微任务：[]打印结果：1475

这里微队列中只有一个任务，执行完后开始从宏队列中取任务执行

step7console.log(2);执行栈：[ callback1 ]宏任务：[ callback3 ]微任务：[]打印结果：14752但是执行callback1的时候遇到另一个Promise,Promise异步执行完毕以后在微队列中又注册了一个callback4函数
step8Promise.resolve().then(() => {
// 这个回调函数叫做callback4，promise属于微任务，所以放到微队列中
console.log(3);
});执行栈：[ Promise ]宏任务：[ callback3 ]微任务：[ callback4 ]打印结果：14752

取出一个宏任务macrotask执行完毕，然后再去微任务队列microtask queue中依次取出执行

step9console.log(3)执行栈：[ callback4 ]宏任务：[ callback3 ]微任务：[]打印结果：147523

微队列全部执行完，再去宏队列中取第一个任务执行

step10console.log(3)执行栈：[ callback3 ]宏任务：[]微任务：[]打印结果：1475236

以上全部执行完毕，执行栈，宏队列，微队列均为空执行栈：[]宏任务：[]微任务：[]打印结果：1475236

再来一段复杂代码

function fn(){
    console.log(1);
    
    setTimeout(() => {
        console.log(2);
        Promise.resolve().then(() => {
            console.log(3)
        });
    });
    
    new Promise((resolve, reject) => {
        console.log(4)
        resolve(5)
    }).then((data) => {
        console.log(data);
        
        Promise.resolve().then(() => {
            console.log(6)
        }).then(() => {
            console.log(7)
            
            setTimeout(() => {
                console.log(8)
            }, 0);
        });
    })
    
    setTimeout(() => {
        console.log(9);
    })
    
    console.log(10);
}
fn();

4. NodeJS中的事件循环

NodeJS中的宏任务和微任务

NodeJS的Event Loop中，执行宏队列的回调任务有6个阶段，如下图：

各个阶段执行的任务如下：

timers阶段：这个阶段执行setTimeout和setInterval预定的callback
I/O callback阶段：执行除了close事件的callbacks、被timers设定的callbacks、setImmediate()设定的callbacks这些之外的callbacks idle, prepare阶段：仅node内部使用
poll阶段：获取新的I/O事件，适当的条件下node将阻塞在这里
check阶段：执行setImmediate()设定的callbacks
close callbacks阶段：执行socket.on('close', ....)这些callbacks

NodeJS的宏队列：

Timers Queue
IO Callbacks Queue
Check Queue
Close Callbacks Queue

这4个都属于宏队列，但是在浏览器中，可以认为只有一个宏队列，所有的宏任务都会被加到这一个宏队列中，但是在NodeJS中，不同的宏任务会被放置在不同的宏队列中

NodeJS的微队列：

Next Tick Queue：是放置process.nextTick(callback)的回调任务的
Other Micro Queue：放置其他微任务，比如Promise等

在浏览器中，也可以认为只有一个微队列，所有的微任务都会被加到这一个微队列中，但是在NodeJS中，不同的微任务会被放置在不同的微队列中

NodeJS中的事件循环过程

执行全局的同步代码；
执行微任务先执行next tick queue所有任务，再执行other micro tasks queue中的所有任务；
开始执行宏任务，共6个阶段，从第1个阶段开始执行相应每一个阶段宏队列中的所有任务，注意，这里是所有每个阶段宏任务队列的所有任务，在浏览器的Event Loop中是只取宏队列的第一个任务出来执行，每一个阶段的宏任务执行完毕后，开始执行微任务，回到步骤2；

Timers Queue -> 步骤2 ->I/O Queue -> 步骤2 ->Check Queue -> 步骤2 ->Close Callback Queue -> 步骤2 ->Timers Queue

再看两张图

代码又来了

function fn(){

    console.log('start');

    setTimeout(() => {              // callback1
        console.log(111);
        
        setTimeout(() => {          // callback2
            console.log(222);
        }, 0);
        
        setImmediate(() => {        // callback3
            console.log(333);
        });
        
        process.nextTick(() => {    // callback4
            console.log(444);
        });
        
    }, 0);
    
    setImmediate(() => {            // callback5
        console.log(555);
        
        process.nextTick(() => {    // callback6
           console.log(666);
        });
    });
    
    setTimeout(() => {              // callback7
        console.log(777);
        
        process.nextTick(() => {    // callback8
            console.log(888);
        });
    }, 0);
    
    process.nextTick(() => {        // callback9
        console.log(999);
    });
    
    console.log('end');
}
fn();

//  before version 11.0.0  start end 999 111 777 444 888 555 333 666 222
//  after  version 11.0.0  start end 999 111 444 777 888 555 666 333 222

PS：版本不同导致运行结果不同

总结：

浏览器的Event Loop和NodeJS的Event Loop是不同的，实现机制也不一样，不要混为一谈。
NodeJS可以理解成有4个宏任务队列和2个微任务队列，但是执行宏任务时有6个阶段。先执行全局Script代码，执行完同步代码调用栈清空后，先从微任务队列Next Tick Queue中依次取出所有的任务放入调用栈中执行，再从微任务队列Other Microtask Queue中依次取出所有的任务放入调用栈中执行。然后开始宏任务的6个阶段，每个阶段都将该宏任务队列中的所有任务都取出来执行（注意，这里和浏览器不一样，浏览器只取一个），每个宏任务阶段执行完毕后，开始执行微任务，再开始执行下一阶段宏任务，以此构成事件循环。
MacroTask包括：setTimeout、setInterval、 setImmediate(Node)、requestAnimation(浏览器)、IO、UI rendering。
Microtask包括：process.nextTick(Node)、Promise、Object.observe、MutationObserver。
v11以前是上面说的那样；v11以后将Node环境的事件循环和浏览器的统一了。
process.nextTick 上限是1000？
写一个休眠函数达到阻塞目的

练习：

宏任务执行顺序；
微任务执行顺序；
宏任务微任务结合执行顺序；

图文细说JavaScript 的运行机制（javascript运行环境有哪些）

前言

1. 单线程的JavaScript

2. JavaScript中的同步异步

3. 宏任务和微任务

宏任务：

微任务：

4. NodeJS中的事件循环

NodeJS中的宏任务和微任务

各个阶段执行的任务如下：

NodeJS的宏队列：

NodeJS的微队列：

NodeJS中的事件循环过程

总结：

练习：

推荐JavaScript经典实例学习资料文章

相关推荐

取消回复欢迎你发表评论:

Google 黑客常用搜索语句一览原力计划

npx简介（npxvip是哪国的）

在 Android 模拟器上运行 ARM 应用（android模拟器原理）

GB28181,B接口协议之SIPRTSPRTPRTMP协议从入门到精通

手机实时提取SIM卡打电话的信令和声音-辅助外设与商用通话方案

安装使用Hoppscotch构建API请求访问与测试

Python自动化办公——后台截图（python 自动截图）

轻松转换!AppleNumbers到Excel的快捷教程

电脑端腾讯文档如何导出excel

网络流媒体经典开源软件宝典webRTC, FFMpeg, SIP_流媒体开发教程

图文细说JavaScript 的运行机制（javascript运行环境有哪些）

前言

1. 单线程的JavaScript

2. JavaScript中的同步异步

3. 宏任务和微任务

宏任务：

微任务：

4. NodeJS中的事件循环

NodeJS中的宏任务和微任务

各个阶段执行的任务如下：

NodeJS的宏队列：

NodeJS的微队列：

NodeJS中的事件循环过程

总结：

练习：

推荐JavaScript经典实例学习资料文章

相关推荐

取消回复欢迎 你 发表评论:

Google 黑客常用搜索语句一览 原力计划

npx简介（npxvip是哪国的）

在 Android 模拟器上运行 ARM 应用（android模拟器原理）

GB28181,B接口协议之SIPRTSPRTPRTMP协议从入门到精通

手机实时提取SIM卡打电话的信令和声音-辅助外设与商用通话方案

安装使用Hoppscotch构建API请求访问与测试

Python自动化办公——后台截图（python 自动截图）

轻松转换!AppleNumbers到Excel的快捷教程

电脑端腾讯文档如何导出excel

网络流媒体经典开源软件宝典webRTC, FFMpeg, SIP_流媒体开发教程

取消回复欢迎你发表评论:

Google 黑客常用搜索语句一览原力计划