2022年前端面试集锦

a公司

• （√）自我介绍
• （√）是否在职；离职原因；未来团队期待，主要看中啥
• （√）职业规划，发展方向
• （√）关注的前端方向：vue3；ts；vite；小程序
• （√）深拷贝和浅拷贝的区别，实现方式有哪些；

deepClone 手写递归，具体实现方式，特别数据的边界处理(时间，function，正则)；如何解决循环引用的问题，处理方式，判断条件终止，deepClone 如何终止的？

export function deepClone(obj, hash = new WeakMap()) {
  // 处理null或者undefined
  if (obj === null) return obj;
  // 处理日期类型
  if (obj instanceof Date) return new Date(obj);
  // 处理正则类型
  if (obj instanceof RegExp) return new RegExp(obj);
  // 普通值或函数不需要深拷贝
  if (typeof obj !== "object") return obj;
  // 对象进行深拷贝
  if (hash.get(obj)) return hash.get(obj);
  let cloneObj = new obj.constructor();
  // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
  hash.set(obj, cloneObj);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      // 实现一个递归拷贝
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  return cloneObj;
}
复制代码

• （√）防抖和节流的区别，使用场景；如何选择使用防抖和节流，用户体验和用户操作来区分吧；防抖的实现过程，具体实现方式，例如定时器
• （√）ES6 常用属性
• （√）Promise 解决地狱回调的问题；async/await 使用，异步过程同步化；
• 一个接口+一个事件监听返回结果，实现同步的封装，onbus，具体流程，用一个 promise 解决
• （√）http 协议的理解：1.0，1.1，2.0，3.0 的区别；强缓存和协商缓存，etag 详细，if-modify-since 详细，两者的优先级
• （√）网络安全：xss，csrf（具体实现方式），sql 注入；防止 token 或 cookie 被窃取的方式（https 或者安全域名限制）；
• （√）vue 响应式原理：观察者订阅者模式，2.0 是 defineProproty；3.0 是 proxy
• （√）虚拟 dom 原理
• （√）diff 算法基于啥算法实现的，原理
• （√）vue 组件传值方式，兄弟组件的传值
• created 为啥不能用箭头函数定义？this 指向不对；如果用箭头函数定义，this 是啥值
• （√）前端性能优化思路，具体实现

b公司

• 一面

• （√）自我介绍，离职原因
• （√）前端期间，印象深刻的问题

• H5 兼容性问题，头部兼容性处理（H5 头部，混合 APP 头部，微信头部，刘海屏，华为内嵌键盘）
• 定制化组件开发：改源码；基于组件本身，二次开发；造轮子，重写
• 虚拟列表功能实现

• （√）浏览器

• 从输入 url 到浏览器渲染经过了哪些流程
• 强缓存，协商缓存；两种方案优势缺点；分别使用情况，使用条件

• （√）nexttick 实现原理，怎么实现 dom 循环完之后回调（Promise.then、MutationObserver、setImmediate、setTimeout）
• （√）js 事件循环机制
• （√）前端性能优化，如何做的
• （√）写博客，最近写了些啥
• （√）看书吗，看啥技术视频
• （√）webpack 个性化配置：拆包；less，sass 处理；打包加速优化；dll plugins；图片资源压缩

• 二面

• （√）自我介绍
• （√）离职原因
• （√）H5 混合开发
• （√）性能优化处理
• （√）最近做的项目，做的啥，介绍项目

c公司

• （√）呆过的公司的团队规模介绍，前端人员规模，自己承担的职责
• （√）前端性能优化：具体实现，优化指标等，骨架屏优化；减少重排或者重绘等（骨架屏，图标 resize，v-show 的处理）
• （√）白屏时间的计算，优化的衡量指标，如何评价优化好与不好，优化结果对比等等
• （√）比较关注的性能指标：包大小，请求数量，浏览器缓存合理使用，页面渲染阻塞情况
• （√）对自己简历写的东西要熟悉，也要能扛得住问，问的时候会一步一步的深度挖掘，提问
• 动画，做的比较少，也没啥好说了
• 如何衡量组件封装的好与不好：扩展性；如何设置扩展性比较好（预留插槽）；
• code view，代码审核，看别人的代码；组件的分层和分治
• 测试脚本，边界测试衡量
• 写过 react native，感觉咋样，哪些比较难：底层 java 编写；用的比较多的，图表和列表
• （√）uniapp 写过一些，小活动
• （√）最近在写 vite，ts，学习啥新的技术
• （√）webpack 的版本，相关配置，对 webpack 的理解
• （√）tree shake 的实现，如何实现的，import/export
• 最棘手的问题：兼容性问题，你的手机没问题，他的有问题；怎么解决，模拟用户问题的情况，看日志查，错误处理系统；效率高吗？
• 封装，提升效率的方式：组件封装，公共函数封装（时间格式化等），公共功能封装（分享，登陆等），引入新的工具或技术（sass）提升效率；
• 写打包的脚本，优化打包发布脚本啥的：应该是运维写的吧，jerkins

d公司

• 一面

• 自我介绍
• html header 头部标签；rem 实现，一般 H5 使用，PC 没咋使用（media）；
• （√）两栏布局实现：flex；定位；grid；float 布局（右边能自适应嘛）
• （√）flex: 1 代表啥(1 0 width)；
• （√）H5 项目：抽取公共样式，引入 sass，实现方案；css name 的规范；不同颜色主题包的实现方案
• （√）项目难点：封装哪些组件？你的上传和默认的上传有哪些区别？封装过程中，如何设计组件？透传 props 如何做的，默认组件的参数如何处理的，$attr
• （√）大数据性能渲染问题：分页加载，虚拟 dom 实现；接口处理，相当于避开了问题；虚拟列表，可以承受几万条
• （√）性能优化，白屏的处理：百度统计优化（defer，async）；缓存（强缓存，协商缓存），CDN，CDN 返回的响应头；优化工具，分析工具；
• （√）koa 写过服务端嘛
• （√）复杂的权限管理如何实现的（菜单权限，角色权限，路由权限，页面内部权限）；权限的封装（and 和 or 多条件处理）；有没有统一的权限处理
• （√）vue3.x 和 2.x 区别，体验：Composition API；TypeScript 优点，解决了哪些问题
• 什么逻辑适合放在 Composition API；什么适合放在页面
• （√）vuex 用过吗？组件内部，公共变量函数啥的
• vite，webpack，babel 看过源代码吗？看过相关的书，如 js 红宝书？js 如何学的
• JS 实现：菜单 ul，li，li 的第三项点击实现字体变为红色；querySelectAll(),返回对象，[0]是数组；
• js 如何判断是不是数组：Array.isArray, typeof, instanceof
• 你比较擅长的是啥？PC 端和 H5 主要差异是啥？
• uniapp 跨端方案如何
• 周边生态（webpack，nodejs，sass，babel）等熟悉源码，做二次开发，还是只是单纯使用

• 二面

• 自我介绍
• 团队有哪些成长，吸收了哪些营养
• 写代码：求平均数

// 求平均时间
var arr = ["8:01", "9:30", "11:50"];
const average = (arr) => {
  let minutes = 0;
  arr.forEach((o) => {
    let a = o.split(":");
    minutes = minutes + a[0] * 60 + parseInt(a[1]);
  });
  minutes = minutes / arr.length;
  let hour = Math.floor(minutes / 60);
  let minute = minutes - 60 * hour;
  console.log(hour, "...", minute);
  return `${hour}:${minute}`;
};
console.log(average(["8:01", "9:30", "11:50"])); // 9:47
复制代码

• （√）浏览器打开页面：cookie 的理解；domain(域名，顶级域名), path, expires(session), http-only
• 接口服务端定义的：接口文档，沟通交流；后端定义接口不规范咋办？数据的处理由前端，还是后端处理；如何定义规划的
• 封装的公共组件和公共函数有哪些人使用，提出了哪些问题？

e公司

• 一面

• vue style scoped 属性作用是啥，如何是样式仅在当前模块生效

• 作用：实现组件的私有化，不对全局造成样式污染，表示当前 style 属性只属于当前模块
• 原理：打包之后，编译成特定样式，data-v-[hash]，即 CSS 带属性选择器

• （√）token 失效刷新如何实现的，token 和登录的处理
• （√）角色权限的处理，路由守卫导航，动态路由匹配
• （√）脚手架，一般会改哪些配置；压缩的处理：插件的压缩处理，gzip 压缩，代码压缩
• （√）代码层级的性能优化
• ES6，promise 链式调用如何实现；promise.then().catch().then().catch()，有报错，如何实现，走的流程
• （√）常用的深浅拷贝；手写深拷贝如何实现；递归调用，处理特殊的边界问题；防止死循环；解决引用递归问题
• （√）ES6 常用属性和方法
• async/await 的使用，和 promise 使用的区别

• 错误捕捉方式：promise 使用.catch；async/await 可以.then.catch，也可以 try/catch
• 调用方式：promsie 连续调用，链式调用；async/await 简洁易懂，异步操作同步化

• （√）js 事件循环：nodejs 里面的，koa 用的多吗
• 让元素看不见：dispaly：none；opacity：0；
• 四个 div，宽度 25%，第四个会被挤下去，不考虑宽高的问题？
• （√）http 协议的理解：1.1 和 2.0 的区别；长链接如何做到的，分成更小的帧，二进制传输

• 二面

• 了解过哪些媒体技术：直播，弹幕，通信
• 了解及时通信嘛：如微信 web 端，websocket，消息推送等，有没有了解过
• 做过一些浏览器兼容性问题，手机端的：微信浏览器，IOS safiri，谷歌内核浏览器
• 小程序，uniapp使用过嘛

f公司

一面

• H5 开发，如何做真机调试

• react native 可以进行真机调试：usb 调试
• vConsole / Eruda 查看报错信息
• Fildder(手机和 fildder 链接同一个网络，然后手机开启手动代理并安装证书)
• android 手机 chrome 浏览器，开启 usb 调试，chrome://inspect/#devices
• Charles 代理调试

• （√）移动端 1px 的问题
• 小程序开发，uniapp 熟悉嘛？
• 小程序 api 有 setData 方法，为啥要合并操作，减少操作次数的原因

• 会导致卡顿，操作反馈延迟严重，渲染结果不实时
• 当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程

• （√）性能优化，具体介绍一下：图片优化，指的是减少图片体积；
• （√）http1.1 和 2.0 的区别
• 图片上传预览：图片存在本地，通过 base64 转化；云库实现，用到了吗？
• （√）webpack 性能优化：并行压缩；dllplugin；splitchunk；混淆压缩；happypack 多线程；includes 减少范围；cache 属性，对性能优化作用最大，改善构建速度
• （√）js 数据类型
• 遍历数组的方式：forEach；for in；for of；

• forEach 和 map 的区别；

• map 不写 return，默认返回 undefined，返回一个数组长度的 undefined 的数组；

• forEach 中断循环

• 用数组的方法，return false；
• 数组的 api，使用 some 或者 every 实现
• 使用 for 循环或者 for in 代替
• 使用 throw 抛出异常

• 遍历对象的方式

• for in：主要用来遍历对象（for keys in obj）

• 遍历自身和继承的可枚举属性（延续原型链遍历出对象的原型属性）
• 有什么问题：要使用 hasOwnProperty 判断，只处理自身的，不处理继承的

• for of： ES6 新增的，遍历所有数据结构的统一的方法

• 只要部署了 Symbol.iterator 属性，就被视为具有 iterator 接口，就可以用 for…of 循环遍历它的成员
• 包括数组、Set 和 Map 结构、某些类似数组的对象（比如 arguments 对象、DOM NodeList 对象）、Generator 对象，以及字符串

• Object.keys：返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)
• Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有属性(不含 Symbol 属性，但是包括不可枚举属性)
• Object.getOwnPropertySymbols()
• Reflect.ownKeys(obj)遍历：返回一个数组，包含对象自身的所有属性，不管属性名是 Symbol 或字符串，也不管是否可枚举

• （√）vue 的组件通信方式：attr；父组件调用子组件的方法（attr；父组件调用子组件的方法（emit；$refs）
• vue-router 路由参数，从一个商品跳入到另一个商品，路由参数变化，但是路由不变化，渲染会出现的问题，

• 原因：同一个组件不会挂载两次
• 解决办法：

• 监听路由参数变化，watch 实现
• 组件内的路由导航：

• 路由独享守卫，beforeEnter
• 组件内的守卫 beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave

• 手写题：js 原型链

// 构造函数的原型
// function的原型
// object的原型
function Foo() {}
const foo = new Foo()
Foo.__proto__ = ?
foo.__proto__ = ?
Foo.prototype.__proto__ = ?
复制代码

• 手写题：发布订阅者模式

class EventEmitter {
  constructor() {
    this.arr = {}
  }
  on(name, fn) {
    this.arr[name] ? this.arr[name].push(fn) : this.arr[name] = [fn]
  }
  off(name, fn) {
    if(this.arr[name)) {
      if(fn) {
        this.arr[name] = this.arr[name].filter(o => o!==fn);
      } else {
        delete this.arr[name]
      }
    }
  }
  once(name, fn) {
   this.arr[name] = fn
  }
  emit(name, params) {
    // this.$emit('change', params)
    if(Array.isArray(this.arr[name]))
    {
      this.arr[name].forEach(fn => {
      fn(params)
    })
    } else{
      this.arr[name](params)
      off(name)
    }
  }
}
复制代码

二面

• 最近的项目，针对项目问

• 单点登录实现，前端还是后端实现；
• 权限管理（后端、菜单、路由、页面级；动态路由加载 自定义指令按钮级 路由导航；）
• 前端性能优化处理
• SSR 渲染原理，用过该技术嘛
• 发布，上线的流程，工具等；jerkins，；docker，看过编译运行代码嘛；

• 前端安全的控制：xss，csrf，sql 注入；怎样的 token 才是安全的 token；其他保证安全的方式；
• 统一登陆处理，第三方登录对接；如何做这种系统，如果你做的话，怎么安排，怎么设计（技术选型，第三方对接，渠道对接，项目结构）
• 百来个人开发一个项目，如何协调，用啥技术（微应用吧 优点：兼容不同技术 新旧系统）
• H5 的混合开发项目：h5 和原生的通信（jsbridge）
• react native 开发：选用技术原因；类似技术有哪些
• 用到了 vue3 嘛，vue3 对 vue2 大的更新；vue3 和最新的 react 有啥区别，对比有啥优势
• 了解过微信公众号，小程序的开发嘛：两个的区别，登陆的过程；微信公众号如何判断你是谁，怎么获取 unnid
• PC 端的扫码登陆实现
• 团队前端人数，任务分工；团队技术栈规划；团队前端，代码质量如何管控；

三面

• 针对项目：做了哪些开发工作；个人价值体现最大的地方；大数据量的问题处理（分页，分片，虚拟滚动，关键字远程搜索，异步加载）；
• 前端美工设计：专门的 UI；Ui 定义了一套自己的组件库规范
• 未来的职业发展定位，职业规划
• 现在项目面对的客户群体，
• 自己评价性格：中性，外向，内向等
• 工作内容：除了技术本身，toB 行业，会面临各式各样的客户，会有不同的沟通方式和交流，会有挑战；怎么平衡技术和客户需求
• 前后端联调，任务划分，有明显的界限划分嘛

程序员面试题库分享

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库

2、前端技术导航大全      推荐：★★★★★

地址：前端技术导航大全

3、开发者颜色值转换工具   推荐：★★★★★

地址 ：开发者颜色值转换工具