个人情况：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 为什么安全
算法题：
- 二叉树层级遍历
- 给一个目标值，输出该目标值在二叉树中的路径
- 有效括号
- 合并两个有序列表/有序数组