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