2021前端⾯试必备题+答案
2021前端⾯试必备题+答案
vue视频教程系列：
Vue3.0新特性教程
视频教程：点击观看
完整教程⽬录：点击查看
Vue源码解析系列
视频教程：点击观看
完整教程⽬录：点击查看
闲云旅游项⽬(vue+element-ui)
视频教程：点击观看
完整教程⽬录：点击查看
前端Vue3.0从0到1⼿把⼿撸码搭建管理后台系统
视频教程：点击观看
完整教程⽬录：点击查看
⼀个 tc p 连接能发⼏个 http 请求？
如果是 HTTP 1.0 版本协议，⼀般情况下，不⽀持长连接，因此在每次请求发送完毕之后，TCP 连接即会断开，因此⼀个 TCP 发送⼀个 HTTP 请求，但是有⼀种情况可以将⼀条 TCP 连接保持在活跃状态，那就是通过 Connection 和 Keep-Alive ⾸部，在请求头带上 Connection: Keep-Alive，并且可以通过 Keep-Alive 通⽤⾸部中指定的，⽤逗号分隔的选项调节 keep-alive 的⾏为，如果客户端和服务端都⽀持，那么其实也可以发送多条，不过此⽅式也有限制，可以关注《HTTP 权威指南》4.5.5 节对于 Keep-Alive 连接的限制和规则。
⽽如果是 HTTP 1.1 版本协议，⽀持了长连接，因此只要 TCP 连接不断开，便可以⼀直发送 HTTP 请求，持续不断，没有上限； 同样，如果是HTTP 2.0 版本协议，⽀持多⽤复⽤，⼀个 TCP 连接是可以并发多个 HTTP 请求的，同样也是⽀持长连接，因此只要不断开 TCP 的连
接，HTTP 请求数也是可以没有上限地持续发送
Virtua l Do m 的优势在哪⾥？
Vir tua
Virtual Dom 的优势」其实这道题⽬⾯试官更想听到的答案不是上来就说「直接操作/频繁操作 DOM 的性能差」，如果 DOM 操作的性能如此不堪，那么 jQuery 也不⾄于活到今天。所以⾯试官更想听到 VDOM 想解决的问题以及为什么频繁的 DOM 操作会性能差。
⾸先我们需要知道：
DOM 引擎、JS 引擎 相互独⽴，但⼜⼯作在同⼀线程（主线程） JS 代码调⽤ DOM API 必须 挂起 JS 引擎、转换传⼊参数数据、激活 DOM 引擎，DOM 重绘后再转换可能有的返回值，最后激活 JS 引擎并继续执⾏若有频繁的 DOM API 调⽤，且浏览器⼚商不做“批量处理”优化，引擎间切换的单位代价将迅速积累若其中有强制重绘的 DOM API 调⽤，重新计算布局、重新绘制图像会引起更⼤的性能消耗。
其次是 VDOM 和真实 DOM 的区别和优化：
1. 虚拟 DOM 不会⽴马进⾏排版与重绘操作
2. 虚拟 DOM 进⾏频繁修改，然后⼀次性⽐较并修改真实 DOM 中需要改的部分，最后在真实 DOM 中进⾏排版与重绘，减少过多DOM节点排梅古诗
版与重绘损耗
3. 虚拟 DOM 有效降低⼤⾯积真实 DOM 的重绘与排版，因为最终与真实 DOM ⽐较差异，可以只渲染局部
⾸屏和⽩屏时间如何计算
⾸屏时间的计算，可以由 Native WebView 提供的类似 onload 的⽅法实现，在 ios 下对应的是 webViewDidFinishLoad，在 android 下对应的是onPageFinished事件。
⽩屏的定义有多种。可以认为“没有任何内容”是⽩屏，可以认为“⽹络或服务异常”是⽩屏，可以认为“数据加载中”是⽩屏，可以认为“图⽚加载不出来”是⽩屏。场景不同，⽩屏的计算⽅式就不相同。
⽅法1：当页⾯的元素数⼩于x时，则认为页⾯⽩屏。⽐如“没有任何内容”，可以获取页⾯的DOM节点数，判断DOM节点数少于某个阈值X，则认为⽩屏。 ⽅法2：当页⾯出现业务定义的错误码时，则认为是⽩屏。⽐如“⽹络或服务异常”。 ⽅法3：当页⾯出现业务定义的特征值时，则认为是⽩屏。⽐如“数据加载中”。
巴比伦文明介绍下 pro m i 的特性、优缺点，内部是如何实现的，动⼿实现 Pro mi
介绍下 pr o mi 的特性、优缺点，内部是如何实现的，动⼿实现 Pro
1）Promi基本特性鄙视近义词
1、Promi有三种状态：pending(进⾏中)、fulfilled(已成功)、rejected(已失败)
2、Promi对象接受⼀个回调函数作为参数, 该回调函数接受两个参数，分别是成功时的回调resolve和失败时的回调reject；另外resolve的
参数除了正常值以外， 还可能是⼀个Promi对象的实例；reject的参数通常是⼀个Error对象的实例。
3、then⽅法返回⼀个新的Promi实例，并接收两个参数onResolved(fulfilled状态的回调)；onRejected(rejected状态的回调，该参数可
选)
子宫肌瘤原因
4、catch⽅法返回⼀个新的Promi实例
5、finally⽅法不管Promi状态如何都会执⾏，该⽅法的回调函数不接受任何参数
6、Promi.all()⽅法将多个多个Promi实例，包装成⼀个新的Promi实例，该⽅法接受⼀个由Promi对象组成的数组作为参数
导函数的基本公式(Promi.all()⽅法的参数可以不是数组，但必须具有Iterator接⼝，且返回的每个成员都是Promi实例)，注意参数中只要有⼀个实例触发catch⽅法，都会触发Promi.all()⽅法返回的新的实例的catch⽅法，如果参数中的某个实例本⾝调⽤了catch⽅法，将不会触发
Promi.all()⽅法返回的新实例的catch⽅法
7、Promi.race()⽅法的参数与Promi.all⽅法⼀样，参数中的实例只要有⼀个率先改变状态就会将该实例的状态传给Promi.race()⽅
法，并将返回值作为Promi.race()⽅法产⽣的Promi实例的返回值
8、solve()将现有对象转为Promi对象，如果该⽅法的参数为⼀个Promi对象，solve()将不做任何处理；如果参
数thenable对象(即具有then⽅法)，solve()将该对象转为Promi对象并⽴即执⾏then⽅法；
如果参数是⼀个原始值，或者是⼀个不具有then⽅法的对象，则solve⽅法返回⼀个新的Promi对象，状态为fulfilled，其参数将会作为then⽅法中onResolved 回调函数的参数，如果solve⽅法不带参数，会直接返回⼀个fulfilled状态的 Promi 对象。需要注意的是，⽴即resolve()的Promi 对象，是在本轮“事件循环”（event loop）的结束时执⾏，⽽不是在下⼀轮“事件循环”的开始时。
9、ject()同样返回⼀个新的Promi对象，状态为rejected，⽆论传⼊任何参数都将作为reject()的参数
2）Promi优点
①统⼀异步 API
Promi 的⼀个重要优点是它将逐渐被⽤作浏览器的异步 API ，统⼀现在各种各样的 API ，以及不兼容的模式和⼿法。
②Promi 与事件对⽐
// If then is not a function, fulfill promi with x.
resolve(x)
}
} catch (e) {
if (called) return
called = true
魏玛宪法
reject(e)
}
} el {
// If x is not an object or function, fulfill promi with x
resolve(x)
}
}
function Promi(excutor) {
let that = this; // 缓存当前promi实例例对象
that.status = PENDING; // 初始状态
that.value = undefined; // fulfilled状态时返回的信息
function resolve(value) { // value成功态时接收的终值
if(value instanceof Promi) {
bruslreturn value.then(resolve, reject);
}
// 实践中要确保 onFulfilled 和 onRejected ⽅⽅法异步执⾏⾏⾏，且应该在 then ⽅⽅法被调⽤⽤的那⼀⼀轮事件循环之后的新执⾏⾏⾏栈中执⾏⾏⾏。 tTimeout(() => {
// 调⽤⽤resolve 回调对应onFulfilled函数
if (that.status === PENDING) {
// 只能由pending状态 => fulfilled状态 (避免调⽤⽤多次resolve reject)
that.status = FULFILLED;
that.value = value;
龙应台散文
}
});
}
function reject(reason) { // reason失败态时接收的拒因
tTimeout(() => {
// 调⽤⽤reject 回调对应onRejected函数
if (that.status === PENDING) {
// 只能由pending状态 => rejected状态 (避免调⽤⽤多次resolve reject)
that.status = REJECTED;
}
});
}
// 捕获在excutor执⾏⾏⾏器器中抛出的异常
// new Promi((resolve, reject) => {
// throw new Error('error in excutor')
// })
try {
excutor(resolve, reject);
} catch (e) {
reject(e);
}
}
Promi.prototype.then = function(onFulfilled, onRejected) {
const that = this;
let newPromi;
// 处理理参数默认值保证参数后续能够继续执⾏⾏⾏
onFulfilled = typeof onFulfilled === "function" ? onFulfilled : value => value;
onRejected = typeof onRejected === "function" ? onRejected : reason => {
throw reason;
};
if (that.status === FULFILLED) { // 成功态
return newPromi = new Promi((resolve, reject) => {
tTimeout(() => {
try{
let x = onFulfilled(that.value);
resolvePromi(newPromi, x, resolve, reject); //新的promi resolve 上⼀⼀个onFulfilled的返回值
} catch(e) {
reject(e); // 捕获前⾯⾯onFulfilled中抛出的异常then(onFulfilled, onRejected);
