puppeteer面试题

转载

mob64ca13fb1f2e 2024-10-17 10:59:59

文章标签 puppeteer面试题 typescript javascript 前端优先级 文章分类 运维

Promise 是 JavaScript 异步编程的关键特性。不管你爱它还是恨它，你都必须理解它。

在这里，我整理了一些关于 Promise 的面试挑战题，从基础到高级。有 10 个代码片段，在阅读我的分析之前，请先自己尝试一下。

1、同步代码块一

console.log('start');
const promise1 = new Promise((resolve, reject) => {
  console.log(1)
})
console.log('end');

第一个问题非常简单。

我们知道：

同步的代码块总是从上到下顺序执行。
当我们调用 new Promise(callback) 时，回调函数会立即执行。

所以这段代码是依次输出start、1、end。

2、出现异步代码的地方

console.log('start');
const promise1 = new Promise((resolve, reject) => {
  console.log(1)
  resolve(2)
})
promise1.then(res => {
  console.log(res)
})
console.log('end');

在这段代码片段中，出现了一段异步代码。也就是.then()中的回调函数。

请记住，JavaScript 引擎总是先执行同步代码，然后再执行异步代码。

遇到这个问题，我们只需要区分同步代码和异步代码即可。

puppeteer面试题_javascript

所以输出的结果是 start 、 1 、 end 和 2 。

3、有“resolve”的地方

console.log('start');
const promise1 = new Promise((resolve, reject) => {
  console.log(1)
  resolve(2)
  console.log(3)
})
promise1.then(res => {
  console.log(res)
})
console.log('end');

这段代码与前面的代码几乎相同；唯一的区别是在resolve(2)之后有一个console.log(3)。

请记住，resolve 方法不会中断函数的执行。它背后的代码仍然会继续执行。

所以输出结果是 start , 1 , 3, end 和 2 。

因为我遇到过一些人认为resolve会中断函数的执行，所以在这里强调一下。

4、不被调用“resolve”的地方

console.log('start');
const promise1 = new Promise((resolve, reject) => {
  console.log(1)
})
promise1.then(res => {
  console.log(2)
})
console.log('end');

在这段代码中，resolve 方法从未被调用过，因此 promise1 始终处于挂起状态。所以 promise1.then(...) 从未被执行过。2 不会在控制台中打印出来。

所以输出结果是 start, 1, end。

5、让你困惑的地方

console.log('start')
const fn = () => (new Promise((resolve, reject) => {
  console.log(1);
  resolve('success')
}))
console.log('middle')
fn().then(res => {
  console.log(res)
})
console.log('end')

这段代码特意增加了一个迷惑挑战者的功能，那就是fn。

但是请记住，无论有多少层函数调用，我们的基本原则都是一样的：

先执行同步代码，再执行异步代码
同步代码按调用顺序执行

puppeteer面试题_前端_02

所以输出结果是 start 、 middle、 1 、 end 和 success。

好的，你觉得这些挑战容易吗？

事实上，这些只是开胃菜。Promise 的难点在于它与 setTimeout 一起出现。接下来，我们加大挑战的难度。

你准备好了吗？开发者！

6、Fulfilling Promise

console.log('start')
Promise.resolve(1).then((res) => {
  console.log(res)
})
Promise.resolve(2).then((res) => {
  console.log(res)
})
console.log('end')

这里 Promise.resolve(1) 将返回一个 Promise 对象，其状态为已完成，结果为 1 ，它是同步代码。

puppeteer面试题_优先级_03

所以输出结果是 start 、 end 、 1 和 2。

7、测试回调基础的地方

console.log('start')
setTimeout(() => {
  console.log('setTimeout')
})
Promise.resolve().then(() => {
  console.log('resolve')
})
console.log('end')

注意！

这是一个非常困难的问题。如果你能正确回答这个问题并说明原因，那么你对 JavaScript 中异步编程的理解已经达到了中级水平。

在解释这个问题之前，让我们先讨论一下相关的理论基础知识。

之前我们说过同步代码是按照调用顺序执行的，那么这些异步回调函数是按照什么顺序执行的呢？

有人可能会说，谁先完成谁先执行。嗯，这是真的，但是如果两个异步任务同时完成呢？

比如上面的代码中，setTimeout的定时器是0秒，Promise.resolve()也会在执行后立即返回一个已完成的Promise对象。

两个异步任务都是立即完成的，那么谁的回调函数会先执行呢？

有的人可能会说setTimeout在前面，所以先打印setTimeout，再打印resolve。实际上，这种说法是错误的。

我们知道很多事情不是按照先进先出的顺序执行的，比如流量。

我们一般将车辆分为两类：

一般车辆
用于紧急任务的车辆。如消防车和救护车。

通过拥挤的十字路口时，我们将让消防车和救护车先行通过。紧急车辆的优先级高于其他车辆。关键词：优先级。

puppeteer面试题_前端_04

在 JavaScript EventLoop 中，还有优先级的概念。

具有较高优先级的任务称为微任务。包括：Promise、ObjectObserver、MutationObserver、process.nextTick、async/await。
优先级较低的任务称为宏任务。包括：setTimeout 、 setInterval 和 XHR 。

puppeteer面试题_typescript_05

虽然 setTimeout 和 Promise.resolve() 是同时完成的，甚至 setTimeout 的代码还是领先的，但是由于它的优先级低，属于它的回调函数是在后面执行的。

puppeteer面试题_javascript_06

所以输出结果是 start 、 end 、 resolve 和 success。

8、一个有微任务和宏任务代码的

const promise = new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log("timerStart");
    resolve("success");
    console.log("timerEnd");
  }, 0);
  console.log(2);
});
promise.then((res) => {
  console.log(res);
});
console.log(4);

如果您已经了解了前面的代码片段，那么这个挑战很容易完成。

我们只需要做三个步骤：

找到同步代码。
找到微任务代码
找到宏任务代码

首先，执行同步代码：

puppeteer面试题_前端_07

输出 1、2 和 4。

然后执行微任务：

puppeteer面试题_puppeteer面试题_08

但是这里有个陷阱：由于当前的promise还处于pending状态，所以这里的代码暂时不会被执行。

然后执行宏任务：

puppeteer面试题_优先级_09

并且promise的状态正在成为fulfilled。

然后，使用事件循环，再次执行微任务：

puppeteer面试题_javascript_10

9、你将被要求在微任务和宏任务之间进行优先排序

在介绍微任务和宏任务的优先级之前，这里先看一下微任务和宏任务交替执行的情况。

const timer1 = setTimeout(() => {
  console.log('timer1');
  const promise1 = Promise.resolve().then(() => {
    console.log('promise1')
  })
}, 0)
const timer2 = setTimeout(() => {
  console.log('timer2')
}, 0)

这段代码的输出是什么？

有些人可能会认为 microtask 和 macrotask 是这样的：

首先执行所有微任务
执行所有宏任务
再次执行所有微任务
绕圈穿过

但是上面的说法是错误的。

正确的理解是：

首先执行所有微任务
执行宏任务
再次执行所有（新添加的）微任务
执行下一个宏任务
绕圈穿过

像这样：

puppeteer面试题_puppeteer面试题_11

或者像这样：

puppeteer面试题_前端_12

所以在上面的代码中，Promise.then 的回调函数会在第二个 setTimeout 的回调函数之前执行，因为它是一个微任务，已经被切线了。

10、最后一次测试你的 Promise 基础

这是我们最后一个挑战，如果你能正确说出这段代码的输出结果，那么你对 Promise 的理解就已经很强了，同类型的面试题根本难不倒你。

console.log('start');
const promise1 = Promise.resolve().then(() => {
  console.log('promise1');
  const timer2 = setTimeout(() => {
    console.log('timer2')
  }, 0)
});
const timer1 = setTimeout(() => {
  console.log('timer1')
  const promise2 = Promise.resolve().then(() => {
    console.log('promise2')
  })
}, 0)
console.log('end');

本次挑战是上一次挑战的升级版，但核心原理保持不变。

记住我们之前学到的：