面经｜三四月前端面试问题记录

个人情况：2021.6 毕业，本次面试为社招，坐标北京；技术栈主要是 Vue，所以 Vue 相关被问的多一些，React 很少；

记录一下最近遇到的面试题，按照面试题目的类型，做个归类划分：

CSS相关：

• 各种选择器的优先级，看代码说出最后的样式结果
• 怎么开启动画加速，底层原理是什么

JS 相关：

• 基础的概念，像原型链、作用域链、闭包、变量提升等等都有问到
• this 指向、原型链、宏任务微任务，看代码说输出，具体代码没有保存 :(
• 为什么数组长度能任意变化
• 函数的 name 属性，看代码说输出，name 属性能手动修改吗

function a(){} 
a.name // "a"
const a = function(){} 
a.name // ES5中为"", ES6 中为 "a" 
window.a = function(){}
a.name // ES5中为"a", ES6 中为 "" 
const a = function b(){} 
a.name // "b" 
window.a = function b(){} 
a.name // "b" 
// 修改
a.name = '1111' 
a.name // 不变，还是"b"

• new 的过程中发生了什么，实现一个简单的 new，注意顺序
• ES6 默认开启尾递归优化，其原理是什么，为什么能优化
• 用 ES5 实现 const：defineProperty
• 实现一个有节流效果的轮询函数
• 实现一个类，其实例可以链式调用，它有一个 sleep 方法，可以 sleep 一段时间后再后续调用

const boy = new PlayBoy('Tom') 
boy.sayHi().sleep(1000).play('王者').sleep(2000).play('跳一跳') 
// 输出 
// 大家好我是Tom 
// 1s 之后 
// 我在玩王者 
// 2s 之后 
// 我在玩跳一跳

• async/await 的错误怎么捕获
• 实现 Promise.all 和 Promise.race
• 实现一个能顺利执行 next 中间件的函数：函数柯里化

/**
 * 实现一个组合compose的方法，使其可以正确调用每个中间件
 *
 * 规定中间件写法：
 * function(val, next) {
 *    // 前置操作
 *    next(val + 1); // 触发下一个中间件
 *    // 后续操作
 * }
 */
function compose(...middlewares) {

}

function add1(x, next) {
  console.log('add1 before');
  next(x + 1);
  console.log('add1 after');
}

function add2(x, next) {
  console.log('add2 before');
  next(x + 2);
  console.log('add2 after');
}

function output(x){
    console.log('output:', x)
}

const input = 0;
compose(add1, add2, (output) => {
  console.log('output:', output);
})(input);

/**
 * 输出:
 *
 * add1 before
 * add2 before
 * output: 3
 * add2 after
 * add1 after
 */

框架相关：

• 虚拟 DOM 的好处：函数式编程模式、多端渲染
• Vue 的插件机制，底层原理是什么
• Vue2 和 Vue3 响应式实现上的区别，为什么要改动
• 写一个 Vue 输入框组件，有防抖功能，并处理父子组件传参
• Vuex 基本要素，actions 和 mutations 的区别，actions 是直接修改状态吗
• Vue router 路由守卫的钩子和使用场景
• Vue nextTick 的用法和底层实现原理
• Vue3 的优化点有哪些
• Vue3 移除了 .native 事件修饰符，我们怎么去写原生事件？
• Vue 中 computed 的设计动机以及底层实现
• Vue 模板是如何编译的
• Vue router 底层原理，不同模式的区别，history 路由刷新页面 404 的原因和解决方法
• Vue 项目中的 Model 层设计
• Vuex 中的变量打包之后存在哪里？和全局作用域中的变量有什么区别
• Vue 中 CSS scoped 的原理
• Vue 中 keep-alive 的实现原理，内部使用的缓存算法是什么，缓存的是什么
• $set 的使用场景

打包工具相关：

• webpack tree shaking 原理
• webpack babel 配置：语法层面的和 API 层面的
• webpack loader 和 plugin 实现原理
• webpack 生命周期，让你实现一系列的生命周期怎么实现
• webpack 打包过程
• webpack 有哪些可优化的地方（构建速度和包体积），具体怎么优化

网络相关：

• 经典面试题：输入 URL 之后发生了什么，HTML 文件中 CSS 文件和 JS 文件的加载顺序，会阻塞页面渲染吗
• DNS 查询过程
• websocket 的好处，怎么建立连接，心跳机制怎么做，错误怎么处理
• webRTC 和 WebAssembly 了解吗
• websocket 和 轮询的区别
• postMessage 使用场景
• cookie 的有效时间设置为 0 会怎么样
• PUT 方法的优点，什么时候用 PUT
• HTTP2 的改进点
• HTTP3 使用的传输层协议是什么，怎么保证可靠性
• HTTPS 为什么安全

算法题：

• 二叉树层级遍历
• 给一个目标值，输出该目标值在二叉树中的路径
• 有效括号
• 合并两个有序列表/有序数组