前端面试复盘：场景题与架构思维的重要性

我提前准备了半个月，八股文背得滚瓜烂熟，Vue 响应式原理、Event Loop、浏览器缓存策略倒背如流。结果一天三场面试，场场被问懵，面完出来脑子都是嗡嗡的。

先简单交代一下我的情况：5 年前端经验，主要技术栈是 Vue2/3 + React，做过电商、中后台项目，自认为基础还算扎实。这次想跳槽去个大厂或者中型公司，薪资期望 35k 左右。结果现实给我狠狠上了一课！

第一场，某二线大厂，一面就挂了。

面试官上来没问八股，直接扔了个场景：

'我们有个活动页，双 11 高峰期预估 PV 200 万 +，页面里有十几个弹窗组件，每个弹窗都有独立的业务逻辑和样式。现在的问题是，首屏加载很慢，用户滚动时卡顿明显。你从工程化、组件设计、渲染优化三个角度，给一套完整的优化方案。'

我当场就有点懵。脑子里想的都是'代码分割、按需加载、虚拟滚动'这些零散的点，但串不成一个完整的方案。面试官追问'弹窗组件怎么设计能减少渲染开销'，我答得磕磕巴巴，最后他礼貌地说'先这样吧'。

第二场，某独角兽，二面挂了。

这一轮面试官更直接，给了一个在线 coding 的场景：

'这是我们的商品列表页，目前用的是传统分页，用户反馈翻页体验不好。现在需要改造成滚动加载无限列表，但要考虑：1. 列表数据可能达到 5000+ 条；2. 每个 item 有图片和复杂的样式；3. 需要保证滚动丝滑，内存不爆炸。写一个核心实现思路，并说明关键点的技术选型。'

我写了虚拟滚动的方案，用 useRef + 滚动监听 + 动态渲染可视区。面试官反问：'你的方案在快速滚动时会有白屏问题吗？怎么解决？如果每个 item 高度不固定呢？如果用 React/Vue 的框架，怎么避免重绘性能问题？'一连串追问下来，我额头开始冒汗，回答得越来越没底气。

第三场，某中厂，一面就挂了。

这次面试官问得更'业务导向'：

'假设我们要做一个低代码搭建的后台页面，用户可以通过拖拽组件生成页面。你会怎么设计整个前端架构？组件协议怎么定义？渲染引擎怎么实现？如何保证产出页面的性能？如何支持组件的版本管理和灰度发布？'

这已经不是背八股能解决的了，需要的是架构思维 + 业务场景深度 + 工程化落地经验。我勉强说了一些组件注册、物料库的概念，但明显深度不够，面试官没有再追问，场面一度很尴尬。

三场下来，我最大的感受就是——

现在前端面试的风向，已经完全变了。

八股文问得越来越少，场景题成了绝对的主流。面试官不再满足于你知道'什么是虚拟 DOM'、'Vue 和 React 的区别是什么'，他们想听的是：

• 给你一个真实业务场景，你能不能拆解问题、设计方案、落地实现、评估效果？
• 你知道性能优化，但你能不能在具体场景下给出可执行的优化路径？
• 你会用框架，但你有没有思考过组件怎么设计才能复用、可维护、低耦合？
• 你做过项目，但你能不能说清楚技术选型的依据、踩过的坑、最终的效果数据？

我发现，现在的大厂和中大型公司，面试套路越来越趋同：

1. 场景题替代八股题——不再问'什么是闭包'，而是问'这段代码内存泄漏了，你排查思路是什么？'
2. 深度追问替代浅层问答——你说'用虚拟滚动优化长列表'，他追问'高度不固定怎么办？快速滚动白屏怎么办？列表里有 iframe 怎么办？'
3. 工程化能力成为分水岭——不会配置 Webpack/Vite、不懂 CI/CD、没做过性能监控体系，很难过二面

参考资源：https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material3

1. 请求失败会弹出一个 toast，如何保证批量请求失败，只弹出一个 toast
2. 如何减少项目里面 if-else
3. babel-runtime 作用是啥
4. 如何实现预览 PDF 文件
5. 如何在划词选择的文本上添加右键菜单 (划词：鼠标滑动选择一组字符，对组字符进行操作)