前端面试复盘：透过问题看技术深度与工程素养

结束面试，坐下来缓了好久才平复心情

这位候选人，简历写得挺漂亮：'精通 Vue/React''熟练搭建前端架构''独立负责项目模块'……看着像是能立马上手干活的主力。可随便深挖几个问题，整个人就开始支支吾吾，技术漏洞全暴露了。

不是想嘲笑谁，而是觉得有必要把这场对话还原一下——给还在准备入行、实习、找工作的前端新人提个醒，也分享点真实职场里技术考察的'听音辨人'逻辑。

一、核心场景考察

Q1：你怎么判断一个前端项目的代码质量？

她说：'代码能跑起来、功能正常就行。'

专业视角应该是：功能正常只是底线。要看代码结构是否清晰（模块化、组件化），是否遵循团队的编码规范（ESLint/Prettier），是否有可维护性（注释、文档），是否考虑了性能（渲染优化、包体积）和安全性（XSS 防护）。更重要的是，是否有单元测试、可调试性如何。否则，项目初期能跑，后期必然变成'屎山'。

Q2：如果页面在生产环境突然白屏，你怎么排查？

她答：'先刷新试试，不行就找后端。'

现实中，我们希望：先打开浏览器控制台看报错信息，确认是资源加载失败、JS 执行错误还是接口异常；接着用 Sentry/监控平台定位错误堆栈和用户操作路径；如果是接口问题，查看网络请求状态和日志；如果是前端代码问题，结合 SourceMap 定位源码位置。最后，带着'错误现象 + 可能原因 + 临时解决方案'同步团队。主动定位问题，比甩锅更重要。

Q3：前端工程化你常用哪些工具或流程？

她说：'就是用 Webpack 打包一下。'

可我们在意的是：你有没有用 Babel 编译兼容、用 ESLint 规范代码、用 Husky 做 Git 提交前检查？会不会用 Tree Shaking 减少打包体积？是否配置过代码分割懒加载？是否用 CI/CD 自动化部署？更关键的是——你能否说清楚每一步解决什么问题？

二、技术栈常见问题清单

除了上述场景题，以下领域也是高频考点，建议对照自查：

Vue 相关

1. 说说 vue 动态权限绑定渲染列表〔权限列表渲染)
2. Vue 用的哪种设计模式
3. 说说 vue 操作真实 dom 性能瓶颈
4. Vue 中如何获取 dom、操作 dom、更新 dom
5. Vue 的双向数据绑定原理是什么
6. mvvm 框架是什么
7. 谈谈 Vue 的 token 存储
8. 知道 nextTick 的作用吗，谈谈对它的理解，是什么，怎么用
9. nextTick 和 setTimeout 区别
10. vue 中为什么用虚拟 dom 而不操作真实 dom
11. Vue 如何进行组件传值
12. 说说 vue 里面的父子通信
13. 谈谈如何实现 vue 组件通信和传值方式
14. 说说 vue 中 Key 值的作用
15. 说说 vue 中的虚拟 dom 和 diff 算法
16. vue3.0 有了解过吗，你觉得 vue3.0 好吗，好在哪
17. VUE 组件如何与 iframe 通信问题

React 相关

1. 说说 React 中 onClick 绑定后的工作原理
2. 说说 react 里面 bind 与箭头函数
3. 说说 react 中的性能优化
4. 高阶组件和高阶函数是什么
5. setState 和 repalceState 的区别
6. redux 中核心组件有哪些，reducer 的作用
7. 什么是受控组件
8. hooks+context 和 redux 你是怎么选择的，都在什么场景下使用
9. useffect 模拟生命周期
10. setsate 更新之后和 usestate 的区别
11. react 父组件 props 变化的时候子组件怎么监听
12. usememo 在 react 中怎么使用
13. React Hooks 各种函数介绍
14. React Component 和 Purecomponent 区别
15. hooks 相对于 class 的优化
16. hooks 父组件怎么调用子组件的方法
17. 讲一下 react 中的通信
18. react 通过什么方法修改参数
19. 说你对 react native 的了解
20. redux 的实现原理

小程序相关

1. 简单谈谈微信小程序
2. 小程序的原生组件有哪些
3. 小程序的安卓版和 ios 版是怎么开发出来
4. uni-app 弹窗被覆盖怎么解决
5. 小程序生命周期
6. 小程序路由跳转
7. 小程序的兼容问题有哪些
8. 小程序框架都学握哪一些，uniapp 都会哪一些，平时开发遇到的困难
9. 小程序怎么获取手机号
10. 小程序的登录流程
11. 小程序如果版本更新了怎么通知用户
12. 小程序嵌入 H5 页面怎么做
13. 小程序的生命周期函数有哪些？分别有什么作用？

Webpack 相关

1. webpack 了解吗，讲一讲原理，怎么压缩代码
2. webpack 怎么配置
3. webpack 怎么打包
4. vue 打包内存过大，怎么使用 webpack 来进行优化
5. webpack 打包用过什么插件
6. 说说 gulp 和 webpack 的区别

TypeScript 相关

1. 了解过 TS 吗？
2. 使用 ts 写一个对象属性约束
3. 说一下 typescript 中的泛型
4. 如何在 TS 中对函数的返回值进行类型约束
5. ts 和 js 相比有什么区别
6. RX 了解吗？

Node.JS 相关

1. 说说对 nodejs 的了解
2. nodejs 如何写接口，返回参数如何处理，有多少种方法
3. websocket 和 http 的区别
4. 常见的 HTTP Method 有哪些？GET/POST 区别？
5. 说一说 Tcp 三次握手，四次挥手
6. 阐述一下 http1.O 与 http2.0 的区别，及 http 和 https 区别
7. node.js 如何导出页面数据形成报表
8. 协商缓存和强缓存
9. 强缓存
10. Expires
11. Cache-Control
12. 协商缓存
13. Etag 和 If-None-Match
14. Last-Modify/lf-Modify-Since
15. 为什么要有 Etag
16. http 常用状态码有哪一些，说—说他们的作用
17. 网络攻击方案有哪些，自己有写过什么安全性方面的东西吗？
18. 静态资源部署到哪？
19. 说说你对 nodejs 的了解

GIT 相关

1. git 经常用哪些指令
2. git 出现代码冲突怎么解决
3. 你们团队是怎么管理 git 分支的
4. 如何实现 Git 的免密操作

其它面试题

1. loadsh 了解过吗？
2. 是否用过混合 APP 开发
3. 项目中的组件是如何使用的
4. hash 和 histoty 的原理
5. window.location.href 和 history.push 的区别
6. 商城项目中有写到调用微信，支付宝支付，简单讲述—下
7. 这个支付与后台对接的过程，微信支付的原理
8. 混合开发知道吗？你是怎么理解混合开发的，在项目中用到过混合开发吗？
9. 平时工作中有是香有接触 linux 系统？说说常用到 linux 命令？
10. echarts 是什么，怎么用
11. Hash 和 history 的区别
12. 谈谈宏任务与微任务的理解，举一个宏任务与微任务的 api
13. 对 Event loop 的了解？