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

·  阅读 21135
面经|三四月前端面试问题记录

个人情况: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 为什么安全

算法题:

  • 二叉树层级遍历
  • 给一个目标值,输出该目标值在二叉树中的路径
  • 有效括号
  • 合并两个有序列表/有序数组
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改