目录
一、进程和线程
1. 概念
线程和进程是操作系统中的两个概念:
进程(process):计算机已经运行的程序,是操作系统管理程序的一种方式
线程(thread):操作系统能够运行运算调度的最小单位,通常情况下它被包含在进程中
通俗的说就是:
进程:可以认为,启动一个应用程序,就会默认启动一个进程(也可能是多个进程)
线程:每一个进程中,都会启动至少一个线程用来执行程序中的代码,这个线程被称之为主线程,所以也可以说进程是线程的容器
再用一个形象的例子解释:
- 操作系统类似于一个大工厂
- 工厂中里有很多车间,这个车间就是进程
- 每个车间可能有一个以上的工人在工厂,这个工人就是线程
2. 操作系统的工作方式
单核CPU和多核CPU
操作系统是如何做到同时让多个进程(边听歌、边写代码、边查阅资料)同时工作呢?
以单核CPU为例
- 这是因为CPU的运算速度非常快,它可以快速的在多个进程之间迅速的切换
- 当我们进程中的线程获取到时间片时,就可以快速执行我们编写的代码
- 对于用户来说是感受不到这种快速的切换的
3. 浏览器中的JavaScript线程
JavaScript是单线程(可以开启workers)的
但是JavaScript的线程应该有自己的容器进程:浏览器或者Node
注 : workers 可以让js开启多线程
浏览器是多进程的 :
- 目前多数的浏览器其实都是多进程的
- 当我们打开一个tab页面时就会开启一个新的进程,这是为了防止一个页面卡死而造成所有页面无法响应,整个浏览器需要强制退出
- 每个进程中又有很多的线程,其中包括执行JavaScript代码的线程
JavaScript的代码执行是在一个单独的线程中执行的 :
- 这就意味着JavaScript的代码,在同一个时刻只能做一件事
- 如果这件事是非常耗时的,就意味着当前的线程就会被阻塞
真正耗时的操作,实际上并不是由JavaScript线程在执行的 :
- 浏览器的每个进程是多线程的,那么其他线程可以来完成这个耗时的操作
- 比如网络请求、定时器、页面点击事件,只需要在特性的时候执行应该有的回调即可
二、浏览器的事件循环
1. 定时器栗子 🌰
如果在执行JavaScript代码的过程中,有异步操作
比如中间插入了一个setTimeout的函数调用
这个函数被放到入调用栈中,执行会立即结束,并不会阻塞后续代码的执行
01 - 代码
let name = 'coder';
function bar() {
console.log('bar function');
}
// 交给浏览器的其他线程执行
setTimeout(() => {
console.log('setTimeout');
}, 10000);
function foo() {
bar();
}
foo();
02 - 解析
2. 监听点击栗子 🌰
01 - 代码
<button>按钮</button>
<script>
const btn = document.querySelector('button');
// 1. 绑定点击事件
btn.onclick = function () {
console.log('btn click event');
};
console.log('Hello World');
// 2. 定时器1
setTimeout(() => {
console.log('0s后的setTimeout');
}, 0);
console.log('-------------');1
// 3. 定时器2
setTimeout(() => {
console.log('10s后的setTimeout');
}, 10000);
console.log('-------------');
</script>
02 - 解析
三、宏任务和微任务
事件循环中并非只维护着一个队列,事实上是有两个队列 :
宏任务队列(macrotask queue):ajax、setTimeout、setInterval、DOM监听、UI Rendering等
微任务队列(microtask queue):Promise的then回调、 Mutation Observer API ( 监听dom变化的 )、queueMicrotask ( 直接把回调函数加入到微任务队列中 ( ) => { } )等
两个队列的优先级 :
- main script中的代码优先执行(编写的顶层script代码)
- 在执行任何一个宏任务之前(不是队列,是一个宏任务),都会先查看微任务队列中是否有任务需要执行
- 也就是宏任务执行之前,必须保证微任务队列是空的,如果不为空,那么就优先执行微任务队列中的任务(回调)
面试题一
代码
console.log('script start'); // 1
setTimeout(function () {
console.log('setTimeout1'); // 8
new Promise(function (resolve) {
resolve();
}).then(function () {
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log('then4'); // 10
});
console.log('then2'); // 9
});
});
new Promise(function (resolve) {
console.log('promise1'); // 2
resolve();
}).then(function () {
console.log('then1'); // 5
});
setTimeout(function () {
console.log('setTimeout2'); // 11
});
console.log(2); // 3
queueMicrotask(() => {
console.log('queueMicrotask1'); // 6
});
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log('then3'); // 7
});
console.log('script end'); // 4
解析
流程一 : 执行全局script代码
流程二 : 清空微任务队列
流程三 : 执行第一个宏任务后清空队列
流程四 : 执行第二个宏任务
面试题二
代码
console.log('script start');
function requestData(url) {
console.log('requestData');
return new Promise((resolve) => {
setTimeout(() => {
console.log('setTimeout');
resolve(url);
}, 2000);
});
}
function getData() {
console.log('getData start');
requestData('why').then((res) => {
console.log('then1-res:', res);
});
console.log('getData end');
}
getData();
console.log('script end');
解析
面试题三
代码
console.log('script start');
function requestData(url) {
console.log('requestData');
return new Promise((resolve) => {
setTimeout(() => {
console.log('setTimeout');
resolve(url);
}, 2000);
});
}
// 2.await/async
async function getData() {
console.log('getData start');
// await下面的代码,相当于一同在then方法中,是一起的
const res = await requestData('why');
console.log('then1-res:', res);
console.log('getData end');
}
getData();
console.log('script end');
解析
面试题四
代码
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');
解析