♣ 事件循环
♠ 进程、线程
线程和进程是操作系统中的两个概念：
进程（process）：计算机已经运行的程序（微信），是操作系统管理程序的一种方式；一个应用程序可能是多进程的，例如浏览器
线程（thread）：操作系统能够运行运算调度的最小单位，通常情况下它被包含在进程中；例如：微信->里面的代码，执行具体的某代码
听起来很抽象，这里还是给出解释：
进程：我们可以认为，启动一个应用程序，就会默认启动一个进程（也可能是多个进程）；
线程：每一个进程中，都会启动至少一个线程用来执行程序中的代码，这个线程被称之为主线程；
所以我们也可以说进程是线程的容器；
再用一个形象的例子解释：
操作系统类似于一个大工厂；工厂中里有很多车间，这个车间就是进程；每个车间可能有一个以上的工人在工厂，这个工人就是线程；
操作系统是如何做到同时让多个进程（边听歌、边写代码、边查阅资料）同时工作呢？
这是因为CPU的运算速度非常快，它可以快速的在多个进程之间迅速的切换；当我们进程中的线程获取到时间片时，就可以快速执行我们编写的代码；对于用户来说是感受不到这种快速的切换的；你可以在Mac的活动监视器或者Windows的资源管理器中查看到很多进程
♠ 浏览器中的JavaScript线程
我们经常会说JavaScript是单线程的，但是JavaScript的线程应该有自己的容器进程：浏览器或者Node。浏览器是一个进程吗，它里面只有一个线程吗？ 目前多数的浏览器其实都是多进程的，当我们打开一个tab页面时就会开启一个新的进程，这是为了防止一个页面卡死而造成所有页面无法响应，整个浏览器需要强制退出；每个进程中又有很多的线程，其中包括执行JavaScript代码的线程；
JavaScript的代码执行是在一个单独的线程中执行的：
这就意味着JavaScript的代码，在同一个时刻只能做一件事；如果这件事是非常耗时的，就意味着当前的线程就会被阻塞；所以真正耗时的操作，实际上并不是由JavaScript线程在执行的： 浏览器的每个进程是多线程的，那么其他线程可以来完成这个耗时的操作；比如网络请求、定时器，我们只需要在特性的时候执行应该有的回调即可；
如果在执行JavaScript代码的过程中，有异步操作呢？
中间我们插入了一个setTimeout的函数调用；这个函数被放到入调用栈中，执行会立即结束，并不会阻塞后续代码的执行；
♠ 进程、宏任务和微任务线程
但是事件循环中并非只维护着一个队列，事实上是有两个队列：
- 宏任务队列（macrotask queue）：ajax、setTimeout、setInterval、DOM监听、UI Rendering等
- 微任务队列（microtask queue）：Promise的then回调、 Mutation Observer API、queueMicrotask()等
那么事件循环对于两个队列的优先级是怎么样的呢？
- main script中的代码优先执行（编写的顶层script代码）；
- 在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行
也就是宏任务执行之前，必须保证微任务队列是空的；如果不为空，那么就优先执行微任务队列中的任务（回调）；
试题一
点击查看代码
setTimeout(function () {
console.log("setTimeout1");
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");
});试题二
点击查看代码
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')♠ Node的事件循环
浏览器中的EventLoop是根据HTML5定义的规范来实现的，不同的浏览器可能会有不同的实现，而Node中是由libuv实现的。
这里我们来给出一个Node的架构图：我们会发现libuv中主要维护了一个EventLoop和worker threads（线程池）；EventLoop负责调用系统的一些其他操作：文件的IO、Network、child-processes等ibuv是一个多平台的专注于异步IO的库，它最初是为Node开发的，但是现在也被使用到Luvit、Julia、pyuv等其他地方；
我们最前面就强调过，事件循环像是一个桥梁，是连接着应用程序的JavaScript和系统调用之间的通道：
无论是我们的文件IO、数据库、网络IO、定时器、子进程，在完成对应的操作后，都会将对应的结果和回调函数放到事件循环（任务队列）中；事件循环会不断的从任务队列中取出对应的事件（回调函数）来执行；
但是一次完整的事件循环Tick（滴答）分成很多个阶段：
- 定时器（Timers）：本阶段执行已经被 setTimeout() 和 setInterval() 的调度回调函数。
- 待定回调（Pending Callback）：对某些系统操作（如TCP错误类型）执行回调，比如TCP连接时接收到ECONNREFUSED。
- idle, prepare：仅系统内部使用。
- 轮询（Poll）：检索新的 I/O 事件；执行与 I/O 相关的回调；
- 检测（check）：setImmediate() 回调函数在这里执行。
- 关闭的回调函数：一些关闭的回调函数，如：socket.on('close', ...)。
我们会发现从一次事件循环的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事件；
所以，在每一次事件循环的tick中，会按照如下顺序来执行代码：
- next tick microtask queue；
- other microtask queue；
- timer queue；
- poll queue；
- check queue；
- close queue；
点击查看代码
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')
