深入JavaScript Day24 - 进程与线程、事件循环、微任务队列、宏任务队列、promise面试题

一、进程与线程

1、如何一句话描述操作系统在【硬件】与【软件】之间的作用？

• 操作系统是连接【硬件】与【软件】之间的桥梁

2、分别用一句话描述进程和线程？

• 【进程process】进程是线程的容器
• 【线程thread】线程是操作系统运行调度的最小单位

• 【进程】我们可以认为，启动一个应用程序，就会默认启动一个进程（有可能是多个进程）
• 【线程】每一个进程中，都会至少启动一个线程来执行程序中的代码，这个线程就是主线程

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

• CPU的运算速度非常快，它可以快速的在多个进程之间迅速切换；
• 每个进程都会获得相应的运行时间片，所以有一种同时运行的错觉；

4、打开Chrome浏览器，每开一个tab，就可以从【活动监视器】里面观察到新开了一个【进程】。为什么Chrome要这么设计呢？

• 这样当一个tab打开网页卡死(可能是死循环代码)后，不会导致整个Chrome卡死，不会影响其他tab的网页运行。

二、事件循环、微任务、宏任务

1、我们经常会说JavaScript是单线程的，那为什么JavaScript处理定时器、网络请求这样的操作不会卡死呢？

• JavaScript是单线程的，但是浏览器是多线程的。
• JavaScript线程会把耗时操作交给其他线程处理（比如定时器的计时操作），等耗时操作完毕，会把回调放入事件循环队列中，JavaScript再从循环队列取出回调进行执行。
• 如此形成一个闭环，JavaScript线程也不会被耗时操作卡死。

image.png

image.png

2、事件循环中维护着哪两个队列？

• 【宏任务队列】macrotask queue
• 【微任务队列】microtask queue
• 【执行顺序】在执行任何一个宏任务前，都会先查看并执行微任务队列中的任务。

3、两个队列中分别对应放代码中的哪些API任务？

• 【宏任务队列】ajax、setTimeout、setInterval、DOM监听、UI Rendering
• 【微任务队列】Promis的then回调、queueMicrotask()

4、事件循环对两个对象的优先级是怎么样的？

• ① main script 中的代码优先执行（编写的顶层script代码）
• ② 在执行任何一个宏任务之前，保证微任务队列是空的(优先执行微任务队列中的任务)

三、面试题

1、面试题一【掌握】

image.png

setTimeout(() => {
  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");
});

• 解法核心
• ①promise构造函数的代码，不会被放在任何队列中，而是在main script中
• ②将代码分三块进行划分【main script】【微任务】【宏任务】
• ③在执行宏任务之前，一定要清空微任务队列里面的任务

2、面试题二【掌握】

image.png

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

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

console.log("script start");

setTimeout(() => {
  console.log("setTimeout");
}, 0);

async1();

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

console.log("script end");

• 解法核心
• ①async里面await后面的函数，相当于promise的then（理解generator + yeild）

3、面试题三【太难，忽略】

image.png

4、node的事件循环【暂时跳过吧，用到再说】

image.png

image.png