三四月前端面试问题

本节目标：理解“三四月前端面试问题”的核心思路，并能把它用于实际开发或面试表达。

**CSS相关：**

各种选择器的优先级，看代码说出最后的样式结果

怎么开启动画加速，底层原理是什么

**JS 相关：**

基础的概念，像原型链、作用域链、闭包、变量提升等等都有问到

this 指向、原型链、宏任务微任务，看代码说输出，具体代码没有保存 😦

为什么数组长度能任意变化

函数的 name 属性，看代码说输出，name 属性能手动修改吗

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

new 的过程中发生了什么，实现一个简单的 new，注意顺序

ES6 默认开启尾递归优化，其原理是什么，为什么能优化

用 ES5 实现 const：defineProperty

实现一个有节流效果的轮询函数

实现一个类，其实例可以链式调用，它有一个 sleep 方法，可以 sleep 一段时间后再后续调用

constboy = newPlayBoy('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); // 触发下一个中间件 *    // 后续操作 * } */functioncompose(...middlewares) {
}
functionadd1(x, next) {  console.log('add1 before');  next(x + 1);  console.log('add1 after');}
functionadd2(x, next) {  console.log('add2 before');  next(x + 2);  console.log('add2 after');}
functionoutput(x){    console.log('output:', x)}
constinput = 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 为什么安全

**算法题：**

二叉树层级遍历

给一个目标值，输出该目标值在二叉树中的路径

有效括号

合并两个有序列表/有序数组

作者：程序媛小灰链接：https://juejin.cn/post/7088883914005184525 来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

三四月前端面试问题 ​

三四月前端面试问题