2024-07-27 深入JavaScript高级语法十——浏览器Node的事件循环-微任务-宏任务

最新推荐文章于 2024-08-22 14:32:34 发布

长乐呀

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量636

点赞数 23

分类专栏： js学习 node.js学习文章标签： javascript node.js

本文链接：https://blog.csdn.net/qq_41068717/article/details/140737629

版权

js学习同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

node.js学习

5 篇文章 0 订阅

订阅专栏

1、进程和线程

线程和进程是操作系统中的两个概念：

进程（ process )：计算机已经运行的程序，是操作系统管理程序的一种方式；
线程（ thread )：操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中；

听起来很抽象，这里还是给出我的解释：

进程：我们可以认为，启动一个应用程序，就会默认启动一个进程（也可能是多个进程）;
线程：每一个进程中，都会启动至少一个线程用来执行程序中的代码，这个线程被称之为主线程；
所以我们也可以说进程是线程的容器；

再用一个形象的例子解释：

操作系统类似于一个大工厂；
工厂中里有很多车间，这个车间就是进程；
每个车间可能有一个以上的工人在工厂，这个工人就是线程；

在这里插入图片描述

2、操作系统的工作方式

操作系统是如何做到同时让多个进程（边听歌、边写代码、边查阅资料）同时工作呢？

这是因为 CPU 的运算速度非常快，它可以快速的在多个进程之间迅速的切换；
当我们进程中的线程获取到时间片时，就可以快速执行我们编写的代码；
对于用户来说是感受不到这种快速的切换的；

你可以在 Mac 的活动监视器或者 Windows 的资源管理器中查看到很多进程：

3、浏览器中的JavaScript线程

我们经常会说 JavaScript 是单线程的，但是 JavaScript 的线程应该有自己的容器进程：浏览器或者 Node。
浏览器是一个进程吗，它里面只有一个线程吗？

目前多数的浏览器其实都是多进程的，当我们打开一个 tab 页面时就会开启一个新的进程，这是为了防止一个页面卡死而造成所有页面无法响应，整个浏览器需要强制退出；
每个进程中又有很多的线程，其中包括执行 JavaScript 代码的线程；

JavaScript 的代码执行是在一个单独的线程中执行的：

这就意味着 JavaScript 的代码，在同一个时刻只能做一件事；
如果这件事是非常耗时的，就意味着当前的线程就会被阻塞；

所以真正耗时的操作，实际上并不是由 JavaScript 线程在执行的：

浏览器的每个进程是多线程的，那么其他线程可以来完成这个耗时的操作；
比如网络请求、定时器，我们只需要在特性的时候执行应该有的回调即可；

4、浏览器的事件循环

4.1、浏览器的事件循环

如果在执行 JavaScript 代码的过程中，有异步操作呢？

中间我们插入了一个 setTimeout 的函数调用；
这个函数被放到入调用栈中，执行会立即结束，并不会阻塞后续代码的执行；

js线程、浏览器其他线程、事件队列三者形成了一个闭环，这个就称之为事件循环。

4.2、浏览器的微任务和宏任务

但是事件循环中并非只维护着一个队列，事实上是有两个队列：

宏任务队列（ macrotask queue ): ajax 、setTimeout 、setInterval 、DOM 监听、UI Rendering 等
微任务队列（ microtask queue ): Promise 的 then 回调、Mutation Observer API 、 queueMicrotask()等

那么事件循环对于两个队列的优先级是怎么样的呢？

1.main script 中的代码优先执行（编写的顶层 script 代码）；
2．在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行
√ 也就是宏任务执行之前，必须保证微任务队列是空的；
√ 如果不为空，那么就优先执行微任务队列中的任务（回调）;

5、浏览器事件循环面试题

5.1、面试题一——以下代码的打印顺序

解析：

注意main script、微任务、宏任务执行顺序
new Promise()里面的方法是会被直接执行的，即会放到main script里面执行

setTimeout(function() {
    console.log('setTimeout');

    new Promise(function(resolve) {
        resolve()
    }).then(function() {
        new Promise(function(resolve) {
            resolve()
        }).then(function() {
            console.log('then4');
        })
        console.log('then2');
    })
})

new Promise(function(resolve) {
    console.log('promise1');
    resolve()
}).then(function() {
    console.log('then1');
})

setTimeout(function() {
    console.log('setTimeout2');
})

console.log(2);

queueMicrotask(() => {
    console.log('queueMicrotask1');
})

new Promise(function(resolve) {
    resolve()
}).then(function() {
    console.log('then3');
})

// 打印顺序：
// promise1
// 2
// then1
// queueMicrotask1
// then3
// setTimeout
// then2
// then4
// setTimeout2

5.2、面试题二——以下代码的打印顺序

解析：

async方法里的代码跟普通代码执行顺序一样，会同步执行
await后面跟的代码也是会立即执行，类似于执行了new Primise()并且调用了resolve()
await这行代码后面的代码可以看作上面Promise方法的then方法的回调，会被放到微任务里

async function bar() {
    console.log(22222);
    return new Promise((resolve) => {
        resolve()
    })
}

async function foo() {
    console.log(11111);

    await bar()

    console.log(33333);
}

foo()

console.log(44444);

// 打印顺序：
// 11111
// 22222
// 44444
// 33333

5.3、面试题三——以下代码的打印顺序

解析：同6.2

async function async1() {
    console.log('async1 start');
    await async2()
    console.log('async1 end');
}

async function async2() {
    console.log('async2');
}

console.log('script start');

setTimeout(function() {
    console.log('setTimeout');
}, 0)

async1()

new Promise(function(resolve) {
    console.log('promise1');
    resolve()
}).then(function() {
    console.log('promise2');
})

console.log('script end');

// 打印顺序：
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout

5.4、面试题四——以下代码的打印顺序

解析：直接return一个值，相当于resolve(4)
（还不太明白，需要想一想）

Promise.resolve().then(() => {
    console.log(0);
    return 4
}).then(res => {
    console.log(res);
})

Promise.resolve().then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(5);
}).then(() => {
    console.log(6);
})

// 打印顺序：
// 0
// 1
// 4
// 2
// 3
// 5
// 6

5.5、面试题五——以下代码的打印顺序

解析：thenable相当于多包了一层resolve(4)
（还不太明白，需要想一想）

Promise.resolve().then(() => {
    console.log(0);
    return {
        then: function(resolve) {
            resolve(4)
        }
    }
}).then(res => {
    console.log(res);
})

Promise.resolve().then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(5);
}).then(() => {
    console.log(6);
})

// 打印顺序：
// 0
// 1
// 2
// 4
// 3
// 5
// 6

5.6、面试题六——以下代码的打印顺序

解析：不是普通的值，多加一次微任务；Promise.resolve(4)，多加一次微任务。一共多加两次微任务。
（还不太明白，需要想一想）

Promise.resolve().then(() => {
    console.log(0);
    return Promise.resolve(4)
}).then(res => {
    console.log(res);
})

Promise.resolve().then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(5);
}).then(() => {
    console.log(6);
})

// 打印顺序：
// 0
// 1
// 2
// 3
// 4
// 5
// 6

6、Node的事件循环

6.1、Node的事件循环

浏览器中的 EventLoop 是根据HTML5定义的规范来实现的，不同的浏览器可能会有不同的实现，而 Node 中是由 libuv 实现的。
这里我们来给出一个 Node 的架构图：

我们会发现 libuv 中主要维护了一个 EventLoop 和 worker threads （线程池）;
EventLoop 负责调用系统的一些其他操作：文件的 IO 、Network 、child-processes 等

libuv 是一个多平台的专注于异步 IO 的库，它最初是为 Node 开发的，但是现在也被使用到 Luvit 、Julia 、pyuv 等其他地方；

在这里插入图片描述

6.2、Node 事件循环的阶段

我们最前面就强调过，事件循环像是一个桥梁，是连接着应用程序的 JavaScript 和系统调用之间的通道：

无论是我们的文件 IO 、数据库、网络 IO 、定时器、子进程，在完成对应的操作后，都会将对应的结果和回调函数放到事件循环（任务队列）中；
事件循环会不断的从任务队列中取出对应的事件（回调函数）来执行；

但是一次完整的事件循环 Tick 分成很多个阶段：

定时器（ Timers )：本阶段执行已经被 setTimeout()和setinterval()的调度回调函数。
待定回调（ Pending Callback )：对某些系统操作（如 TCP 错误类型）执行回调，比如 TCP 连接时接收到ECONNREFUSED。
idle , prepare ：仅系统内部使用。
轮询（ Poll )：检索新的I/O事件；执行与I/O相关的回调；
检测（ check ): setlmmediate()回调函数在这里执行。
关闭的回调函数：一些关闭的回调函数，如：socket.on (’ close ',…)。

在这里插入图片描述

6.3、Node的宏任务和微任务

我们会发现从一次事件循环的 Tick 来说， Node 的事件循环更复杂，它也分为微任务和宏任务：

宏任务（ macrotask )：setTimeout 、setInterval 、IO 事件、setimmediate 、close 事件；
微任务（ microtask ): Promise的then回调、process.nextTick 、queueMicrotask ;

但是， Node 中的事件循环不只是微任务队列和宏任务队列：

微任务队列：
√ next tick queue : process.nextTick ;
√ other queue : Promise的then回调、queueMicrotask ;
宏任务队列：
√ timer queue : setTimeout 、setInterval ;
√ poll queue : IO 事件；
√ check queue : setimmediate ;
√ close queue : close 事件；

6.4、Node事件循环的顺序

所以，在每一次事件循环的 tick 中，会按照如下顺序来执行代码：

next tick microtask queue ;
other microtask queue ;
timer queue ;
poll queue ;
check queue ;
close queue ;

7、Node事件循环面试题

7.1、面试题一——以下代码的打印顺序

async function async1() {
    console.log('async1 start');
    await async2()
    console.log('async1 end');
}

async function async2() {
    console.log('async2');
}

console.log('script start');

setTimeout(function() {
    console.log('setTimeout0');
}, 0)

setTimeout(function() {
    console.log('setTimeout2');
}, 300)

setImmediate(() => console.log('setImmediate'))

process.nextTick(() => console.log('nextTick1'))

async1()

process.nextTick(() => console.log('nextTick2'))

new Promise(function(resolve) {
    console.log('promise1');
    resolve()
    console.log('promise2');
}).then(function() {
    console.log('promise3');
})

console.log('script end');

// 打印顺序：
// script start
// async1 start
// async2
// promise1
// promise2
// script end
// nextTick1
// nextTick2
// async1 end
// promise3
// setTimeout0
// setImmediate
// setTimeout2

长乐呀

关注

23
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
2024-07-27 深入JavaScript高级语法十——浏览器Node的事件循环-微任务-宏任务

解析：不是普通的值，多加一次微任务；Promise.resolve(4)，多加一次微任务。一共多加两次微任务。解析：thenable相当于多包了一层resolve(4)解析：直接return一个值，相当于resolve(4)（还不太明白，需要想一想）（还不太明白，需要想一想）（还不太明白，需要想一想）
复制链接

扫一扫

专栏目录