2023 我的前端面试小结

首屏和白屏时间如何计算

首屏时间的计算，可以由 Native WebView 提供的类似 onload 的方法实现，在 ios 下对应的是 webViewDidFinishLoad，在 android 下对应的是 onPageFinished 事件。

白屏的定义有多种。可以认为“没有任何内容”是白屏，可以认为“网络或服务异常”是白屏，可以认为“数据加载中”是白屏，可以认为“图片加载不出来”是白屏。场景不同，白屏的计算方式就不相同。

方法 1：当页面的元素数小于 x 时，则认为页面白屏。比如“没有任何内容”，可以获取页面的 DOM 节点数，判断 DOM 节点数少于某个阈值 X，则认为白屏。 方法 2：当页面出现业务定义的错误码时，则认为是白屏。比如“网络或服务异常”。 方法 3：当页面出现业务定义的特征值时，则认为是白屏。比如“数据加载中”。

详细说明 Event loop

众所周知 JS 是门非阻塞单线程语言，因为在最初 JS 就是为了和浏览器交互而诞生的。如果 JS 是门多线程的语言话，我们在多个线程中处理 DOM 就可能会发生问题（一个线程中新加节点，另一个线程中删除节点），当然可以引入读写锁解决这个问题。

JS 在执行的过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码，会被挂起并加入到 Task（有多种 task） 队列中。一旦执行栈为空，Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说 JS 中的异步还是同步行为。

console.log('script start');
setTimeout(function() {  console.log('setTimeout');}, 0);
console.log('script end');

以上代码虽然 setTimeout 延时为 0，其实还是异步。这是因为 HTML5 标准规定这个函数第二个参数不得小于 4 毫秒，不足会自动增加。所以 setTimeout 还是会在 script end 之后打印。

不同的任务源会被分配到不同的 Task 队列中，任务源可以分为 微任务（microtask） 和 宏任务（macrotask）。在 ES6 规范中，microtask 称为 jobs，macrotask 称为 task。

console.log('script start');
setTimeout(function() {  console.log('setTimeout');}, 0);
new Promise((resolve) => {    console.log('Promise')    resolve()}).then(function() {  console.log('promise1');}).then(function() {  console.log('promise2');});
console.log('script end');// script start => Promise => script end => promise1 => promise2 => setTimeout

以上代码虽然 setTimeout 写在 Promise 之前，但是因为 Promise 属于微任务而 setTimeout 属于宏任务，所以会有以上的打印。

微任务包括 process.nextTick ，promise ，Object.observe ，MutationObserver

宏任务包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering

很多人有个误区，认为微任务快于宏任务，其实是错误的。因为宏任务中包括了 script ，浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务。

所以正确的一次 Event loop 顺序是这样的

1. 执行同步代码，这属于宏任务

2. 执行栈为空，查询是否有微任务需要执行

3. 执行所有微任务

4. 必要的话渲染 UI

5. 然后开始下一轮 Event loop，执行宏任务中的异步代码

通过上述的 Event loop 顺序可知，如果宏任务中的异步代码有大量的计算并且需要操作 DOM 的话，为了更快的 界面响应，我们可以把操作 DOM 放入微任务中。

Node 中的 Event loop

Node 中的 Event loop 和浏览器中的不相同。

Node 的 Event loop 分为 6 个阶段，它们会按照顺序反复运行

┌───────────────────────┐┌─>│        timers         ││  └──────────┬────────────┘│  ┌──────────┴────────────┐│  │     I/O callbacks     ││  └──────────┬────────────┘│  ┌──────────┴────────────┐│  │     idle, prepare     ││  └──────────┬────────────┘      ┌───────────────┐│  ┌──────────┴────────────┐      │   incoming:   ││  │         poll          │<──connections───     ││  └──────────┬────────────┘      │   data, etc.  ││  ┌──────────┴────────────┐      └───────────────┘│  │        check          ││  └──────────┬────────────┘│  ┌──────────┴────────────┐└──┤    close callbacks    │   └───────────────────────┘

timer

timers 阶段会执行 setTimeout 和 setInterval

一个 timer 指定的时间并不是准确时间，而是在达到这个时间后尽快执行回调，可能会因为系统正在执行别的事务而延迟。

下限的时间有一个范围：[1, 2147483647] ，如果设定的时间不在这个范围，将被设置为 1。

I/O

I/O 阶段会执行除了 close 事件，定时器和 setImmediate 的回调

idle, prepare

idle, prepare 阶段内部实现

poll

poll 阶段很重要，这一阶段中，系统会做两件事情

1. 执行到点的定时器

2. 执行 poll 队列中的事件

并且当 poll 中没有定时器的情况下，会发现以下两件事情

• 如果 poll 队列不为空，会遍历回调队列并同步执行，直到队列为空或者系统限制

• 如果 poll 队列为空，会有两件事发生

• 如果有 setImmediate 需要执行，poll 阶段会停止并且进入到 check 阶段执行 setImmediate
  

• 如果没有 setImmediate 需要执行，会等待回调被加入到队列中并立即执行回调

如果有别的定时器需要被执行，会回到 timer 阶段执行回调。

check

check 阶段执行 setImmediate

close callbacks

close callbacks 阶段执行 close 事件

并且在 Node 中，有些情况下的定时器执行顺序是随机的

setTimeout(() => {    console.log('setTimeout');}, 0);setImmediate(() => {    console.log('setImmediate');})// 这里可能会输出 setTimeout，setImmediate// 可能也会相反的输出，这取决于性能// 因为可能进入 event loop 用了不到 1 毫秒，这时候会执行 setImmediate// 否则会执行 setTimeout

当然在这种情况下，执行顺序是相同的

var fs = require('fs')
fs.readFile(__filename, () => {    setTimeout(() => {        console.log('timeout');    }, 0);    setImmediate(() => {        console.log('immediate');    });});// 因为 readFile 的回调在 poll 中执行// 发现有 setImmediate ，所以会立即跳到 check 阶段执行回调// 再去 timer 阶段执行 setTimeout// 所以以上输出一定是 setImmediate，setTimeout

上面介绍的都是 macrotask 的执行情况，microtask 会在以上每个阶段完成后立即执行。

setTimeout(()=>{    console.log('timer1')
    Promise.resolve().then(function() {        console.log('promise1')    })}, 0)
setTimeout(()=>{    console.log('timer2')
    Promise.resolve().then(function() {        console.log('promise2')    })}, 0)
// 以上代码在浏览器和 node 中打印情况是不同的// 浏览器中打印 timer1, promise1, timer2, promise2// node 中打印 timer1, timer2, promise1, promise2

Node 中的 process.nextTick 会先于其他 microtask 执行。

setTimeout(() => {  console.log("timer1");
  Promise.resolve().then(function() {    console.log("promise1");  });}, 0);
process.nextTick(() => {  console.log("nextTick");});// nextTick, timer1, promise1

new 一个函数发生了什么

构造调用：

• 创造一个全新的对象

• 这个对象会被执行 [[Prototype]] 连接，将这个新对象的 [[Prototype]] 链接到这个构造函数.prototype 所指向的对象

• 这个新对象会绑定到函数调用的 this

• 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象

代码输出结果

Promise.reject('err!!!')  .then((res) => {    console.log('success', res)  }, (err) => {    console.log('error', err)  }).catch(err => {    console.log('catch', err)  })

输出结果如下：

error err!!!

我们知道，.then函数中的两个参数：

• 第一个参数是用来处理 Promise 成功的函数

• 第二个则是处理失败的函数

也就是说Promise.resolve('1')的值会进入成功的函数，Promise.reject('2')的值会进入失败的函数。

在这道题中，错误直接被then的第二个参数捕获了，所以就不会被catch捕获了，输出结果为：error err!!!'

但是，如果是像下面这样：

Promise.resolve()  .then(function success (res) {    throw new Error('error!!!')  }, function fail1 (err) {    console.log('fail1', err)  }).catch(function fail2 (err) {    console.log('fail2', err)  })

在then的第一参数中抛出了错误，那么他就不会被第二个参数不活了，而是被后面的catch捕获到。

事件是什么？事件模型？

事件是用户操作网页时发生的交互动作，比如 click/move， 事件除了用户触发的动作外，还可以是文档加载，窗口滚动和大小调整。事件被封装成一个 event 对象，包含了该事件发生时的所有相关信息（ event 的属性）以及可以对事件进行的操作（ event 的方法）。

事件是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型：

• DOM0 级事件模型，这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数，也可以通过 js 属性来指定监听函数。所有浏览器都兼容这种方式。直接在 dom 对象上注册事件名称，就是 DOM0 写法。

• IE 事件模型，在该事件模型中，一次事件共有两个过程，事件处理阶段和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来添加监听函数，可以添加多个监听函数，会按顺序依次执行。

• DOM2 级事件模型，在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。

Vue 通信

1.props和$emit2.中央事件总线 EventBus(基本不用)3.vuex(官方推荐状态管理器)4.$parent和$children当然还有一些其他办法，但基本不常用，或者用起来太复杂来。 介绍来通信的方式，还可以扩展说一下使用场景，如何使用，注意事项之类的。

参考 前端进阶面试题详细解答

箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 普通函数通过 function 关键字定义， this 无法结合词法作用域使用，在运行时绑定，只取决于函数的调用方式，在哪里被调用，调用位置。（取决于调用者，和是否独立运行）

• 箭头函数使用被称为 “胖箭头” 的操作 => 定义，箭头函数不应用普通函数 this 绑定的四种规则，而是根据外层（函数或全局）的作用域来决定 this，且箭头函数的绑定无法被修改（new 也不行）。

• 箭头函数常用于回调函数中，包括事件处理器或定时器

• 箭头函数和 var self = this，都试图取代传统的 this 运行机制，将 this 的绑定拉回到词法作用域

• 没有原型、没有 this、没有 super，没有 arguments，没有 new.target

• 不能通过 new 关键字调用

• 一个函数内部有两个方法：[[Call]] 和 [[Construct]]，在通过 new 进行函数调用时，会执行 [[construct]] 方法，创建一个实例对象，然后再执行这个函数体，将函数的 this 绑定在这个实例对象上

• 当直接调用时，执行 [[Call]] 方法，直接执行函数体

• 箭头函数没有 [[Construct]] 方法，不能被用作构造函数调用，当使用 new 进行函数调用时会报错。

function foo() {  return (a) => {    console.log(this.a);  }}
var obj1 = {  a: 2}
var obj2 = {  a: 3 }
var bar = foo.call(obj1);bar.call(obj2);

哪些情况会导致内存泄漏

以下四种情况会造成内存的泄漏：

• 意外的全局变量： 由于使用未声明的变量，而意外的创建了一个全局变量，而使这个变量一直留在内存中无法被回收。

• 被遗忘的计时器或回调函数： 设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。

• 脱离 DOM 的引用： 获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。

• 闭包： 不合理的使用闭包，从而导致某些变量一直被留在内存当中。

代码输出结果

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);

输出结果如下：

124timerStarttimerEndsuccess

代码执行过程如下：

• 首先遇到 Promise 构造函数，会先执行里面的内容，打印1；

• 遇到定时器steTimeout，它是一个宏任务，放入宏任务队列；

• 继续向下执行，打印出 2；

• 由于Promise的状态此时还是pending，所以promise.then先不执行；

• 继续执行下面的同步任务，打印出 4；

• 此时微任务队列没有任务，继续执行下一轮宏任务，执行steTimeout；

• 首先执行timerStart，然后遇到了resolve，将promise的状态改为resolved且保存结果并将之前的promise.then推入微任务队列，再执行timerEnd；

• 执行完这个宏任务，就去执行微任务promise.then，打印出resolve的结果。

快排--时间复杂度 nlogn~ n^2 之间

题目描述:实现一个快排

实现代码如下:

function quickSort(arr) {  if (arr.length < 2) {    return arr;  }  const cur = arr[arr.length - 1];  const left = arr.filter((v, i) => v <= cur && i !== arr.length - 1);  const right = arr.filter((v) => v > cur);  return [...quickSort(left), cur, ...quickSort(right)];}// console.log(quickSort([3, 6, 2, 4, 1]));

代码输出结果

var a = 1;function printA(){  console.log(this.a);}var obj={  a:2,  foo:printA,  bar:function(){    printA();  }}
obj.foo(); // 2obj.bar(); // 1var foo = obj.foo;foo(); // 1

输出结果： 2 1 1

解析：

1. obj.foo()，foo 的 this 指向 obj 对象，所以 a 会输出 2；

2. obj.bar()，printA 在 bar 方法中执行，所以此时 printA 的 this 指向的是 window，所以会输出 1；

3. foo()，foo 是在全局对象中执行的，所以其 this 指向的是 window，所以会输出 1；

同步和异步的区别

• 同步指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，那么这个进程会一直等待下去，直到消息返回为止再继续向下执行。

• 异步指的是当一个进程在执行某个请求时，如果这个请求需要等待一段时间才能返回，这个时候进程会继续往下执行，不会阻塞等待消息的返回，当消息返回时系统再通知进程进行处理。

懒加载与预加载的区别

这两种方式都是提高网页性能的方式，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

• 懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。它适用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，以此来实现图片的延迟加载。

• 预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。 通过预加载能够减少用户的等待时间，提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。

继承

原型链继承

function Animal() {    this.colors = ['black', 'white']}Animal.prototype.getColor = function() {    return this.colors}function Dog() {}Dog.prototype =  new Animal()
let dog1 = new Dog()dog1.colors.push('brown')let dog2 = new Dog()console.log(dog2.colors)  // ['black', 'white', 'brown']

原型链继承存在的问题：

• 问题 1：原型中包含的引用类型属性将被所有实例共享；

• 问题 2：子类在实例化的时候不能给父类构造函数传参；

借用构造函数实现继承

function Animal(name) {    this.name = name    this.getName = function() {        return this.name    }}function Dog(name) {    Animal.call(this, name)}Dog.prototype =  new Animal()

借用构造函数实现继承解决了原型链继承的 2 个问题：引用类型共享问题以及传参问题。但是由于方法必须定义在构造函数中，所以会导致每次创建子类实例都会创建一遍方法。

组合继承

组合继承结合了原型链和盗用构造函数，将两者的优点集中了起来。基本的思路是使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。

function Animal(name) {    this.name = name    this.colors = ['black', 'white']}Animal.prototype.getName = function() {    return this.name}function Dog(name, age) {    Animal.call(this, name)    this.age = age}Dog.prototype =  new Animal()Dog.prototype.constructor = Dog
let dog1 = new Dog('奶昔', 2)dog1.colors.push('brown')let dog2 = new Dog('哈赤', 1)console.log(dog2) // { name: "哈赤", colors: ["black", "white"], age: 1 }

寄生式组合继承

组合继承已经相对完善了，但还是存在问题，它的问题就是调用了 2 次父类构造函数，第一次是在 new Animal()，第二次是在 Animal.call() 这里。

所以解决方案就是不直接调用父类构造函数给子类原型赋值，而是通过创建空函数 F 获取父类原型的副本。

寄生式组合继承写法上和组合继承基本类似，区别是如下这里：

- Dog.prototype =  new Animal()- Dog.prototype.constructor = Dog
+ function F() {}+ F.prototype = Animal.prototype+ let f = new F()+ f.constructor = Dog+ Dog.prototype = f

稍微封装下上面添加的代码后：

function object(o) {    function F() {}    F.prototype = o    return new F()}function inheritPrototype(child, parent) {    let prototype = object(parent.prototype)    prototype.constructor = child    child.prototype = prototype}inheritPrototype(Dog, Animal)

如果你嫌弃上面的代码太多了，还可以基于组合继承的代码改成最简单的寄生式组合继承：

- Dog.prototype =  new Animal()- Dog.prototype.constructor = Dog
+ Dog.prototype =  Object.create(Animal.prototype)+ Dog.prototype.constructor = Dog

class 实现继承

class Animal {    constructor(name) {        this.name = name    }     getName() {        return this.name    }}class Dog extends Animal {    constructor(name, age) {        super(name)        this.age = age    }}

如果一个构造函数，bind 了一个对象，用这个构造函数创建出的实例会继承这个对象的属性吗？为什么？

不会继承，因为根据 this 绑定四大规则，new 绑定的优先级高于 bind 显示绑定，通过 new 进行构造函数调用时，会创建一个新对象，这个新对象会代替 bind 的对象绑定，作为此函数的 this，并且在此函数没有返回对象的情况下，返回这个新建的对象

CDN 的概念

CDN（Content Delivery Network，内容分发网络）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

典型的 CDN 系统由下面三个部分组成：

• 分发服务系统： 最基本的工作单元就是 Cache 设备，cache（边缘 cache）负责直接响应最终用户的访问请求，把缓存在本地的内容快速地提供给用户。同时 cache 还负责与源站点进行内容同步，把更新的内容以及本地没有的内容从源站点获取并保存在本地。Cache 设备的数量、规模、总服务能力是衡量一个 CDN 系统服务能力的最基本的指标。

• 负载均衡系统： 主要功能是负责对所有发起服务请求的用户进行访问调度，确定提供给用户的最终实际访问地址。两级调度体系分为全局负载均衡（GSLB）和本地负载均衡（SLB）。全局负载均衡主要根据用户就近性原则，通过对每个服务节点进行“最优”判断，确定向用户提供服务的 cache 的物理位置。本地负载均衡主要负责节点内部的设备负载均衡

• 运营管理系统： 运营管理系统分为运营管理和网络管理子系统，负责处理业务层面的与外界系统交互所必须的收集、整理、交付工作，包含客户管理、产品管理、计费管理、统计分析等功能。

事件循环机制 （Event Loop）

事件循环机制从整体上告诉了我们 JavaScript 代码的执行顺序 Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

先执行 Script 脚本，然后清空微任务队列，然后开始下一轮事件循环，继续先执行宏任务，再清空微任务队列，如此往复。

• 宏任务：Script/setTimeout/setInterval/setImmediate/ I/O / UI Rendering

• 微任务：process.nextTick()/Promise

上诉的 setTimeout 和 setInterval 等都是任务源，真正进入任务队列的是他们分发的任务。

优先级

• setTimeout = setInterval 一个队列

• setTimeout > setImmediate 

• process.nextTick > Promise

for (const macroTask of macroTaskQueue) {    handleMacroTask();      for (const microTask of microTaskQueue) {          handleMicroTask(microTask);    }}

字符串模板

function render(template, data) {    const reg = /\{\{(\w+)\}\}/; // 模板字符串正则    if (reg.test(template)) { // 判断模板里是否有模板字符串        const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段        template = template.replace(reg, data[name]); // 将第一个模板字符串渲染        return render(template, data); // 递归的渲染并返回渲染后的结构    }    return template; // 如果模板没有模板字符串直接返回}

测试：

let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';let person = {    name: '布兰',    age: 12}render(template, person); // 我是布兰，年龄12，性别undefined

变量提升

函数在运行的时候，会首先创建执行上下文，然后将执行上下文入栈，然后当此执行上下文处于栈顶时，开始运行执行上下文。

在创建执行上下文的过程中会做三件事：创建变量对象，创建作用域链，确定 this 指向，其中创建变量对象的过程中，首先会为 arguments 创建一个属性，值为 arguments，然后会扫码 function 函数声明，创建一个同名属性，值为函数的引用，接着会扫码 var 变量声明，创建一个同名属性，值为 undefined，这就是变量提升。

instance 如何使用

左边可以是任意值，右边只能是函数

'hello tuture' instanceof String // false