跳到主要内容前端面试复盘:场景题成主流,八股文不再万能 | 极客日志JavaScript大前端算法
前端面试复盘:场景题成主流,八股文不再万能
综述由AI生成拥有 5 年经验的开发者分享三次前端面试失败经历,指出当前大厂面试风向已从背诵八股文转向真实业务场景考察。面试官更关注工程化落地、架构思维及性能优化方案的深度追问能力。文章总结了场景题替代八股题、深度追问替代浅层问答、工程化能力成为分水岭三大趋势,并整理了涵盖性能优化、框架原理、工程化基建等领域的百道常见面试题供求职者参考。
小熊软糖14 浏览 前端面试复盘:场景题成主流,八股文不再万能
我提前准备了半个月,八股文背得滚瓜烂熟,Vue 响应式原理、Event Loop、浏览器缓存策略倒背如流。结果一天三场面试,场场被问懵,面完出来脑子都是嗡嗡的。
先简单交代一下我的情况:5 年前端经验,主要技术栈是 Vue2/3 + React,做过电商、中后台项目,自认为基础还算扎实。这次想跳槽去个大厂或者中型公司,薪资期望 35k 左右。结果现实给我狠狠上了一课!
面试经历回顾
第一场:某二线大厂,一面就挂了
面试官上来没问八股,直接扔了个场景:
'我们有个活动页,双 11 高峰期预估 PV 200 万+,页面里有十几个弹窗组件,每个弹窗都有独立的业务逻辑和样式。现在的问题是,首屏加载很慢,用户滚动时卡顿明显。你从工程化、组件设计、渲染优化三个角度,给一套完整的优化方案。'
我当场就有点懵。脑子里想的都是'代码分割、按需加载、虚拟滚动'这些零散的点,但串不成一个完整的方案。面试官追问'弹窗组件怎么设计能减少渲染开销',我答得磕磕巴巴,最后他礼貌地说'先这样吧'。
第二场:某独角兽,二面挂了
这一轮面试官更直接,给了一个在线 coding 的场景:
'这是我们的商品列表页,目前用的是传统分页,用户反馈翻页体验不好。现在需要改造成滚动加载无限列表,但要考虑:1. 列表数据可能达到 5000+ 条;2. 每个 item 有图片和复杂的样式;3. 需要保证滚动丝滑,内存不爆炸。写一个核心实现思路,并说明关键点的技术选型。'
我写了虚拟滚动的方案,用 useRef + 滚动监听 + 动态渲染可视区。面试官反问:'你的方案在快速滚动时会有白屏问题吗?怎么解决?如果每个 item 高度不固定呢?如果用 React/Vue 的框架,怎么避免重绘性能问题?'一连串追问下来,我额头开始冒汗,回答得越来越没底气。
第三场:某中厂,一面就挂了
这次面试官问得更'业务导向':
'假设我们要做一个低代码搭建的后台页面,用户可以通过拖拽组件生成页面。你会怎么设计整个前端架构?组件协议怎么定义?渲染引擎怎么实现?如何保证产出页面的性能?如何支持组件的版本管理和灰度发布?'
这已经不是背八股能解决的了,需要的是架构思维 + 业务场景深度 + 工程化落地经验。我勉强说了一些组件注册、物料库的概念,但明显深度不够,面试官没有再追问,场面一度很尴尬。
面试风向变化分析
三场下来,我最大的感受就是——现在前端面试的风向,已经完全变了。
八股文问得越来越少,场景题成了绝对的主流。面试官不再满足于你知道'什么是虚拟 DOM'、'Vue 和 React 的区别是什么',他们想听的是:
- 给你一个真实业务场景,你能不能拆解问题、设计方案、落地实现、评估效果?
- 你知道性能优化,但你能不能在具体场景下给出可执行的优化路径?
- 你会用框架,但你有没有思考过组件怎么设计才能复用、可维护、低耦合?
- 你做过项目,但你能不能说清楚技术选型的依据、踩过的坑、最终的效果数据?
我发现,现在的大厂和中大型公司,面试套路越来越趋同:
- 场景题替代八股题——不再问'什么是闭包',而是问'这段代码内存泄漏了,你排查思路是什么?'
- 深度追问替代浅层问答——你说'用虚拟滚动优化长列表',他追问'高度不固定怎么办?快速滚动白屏怎么办?列表里有 iframe 怎么办?'
- 工程化能力成为分水岭——不会配置 Webpack/Vite、不懂 CI/CD、没做过性能监控体系,很难过二面
常见前端面试题精选
以下整理了部分高频面试题,涵盖性能优化、框架原理、工程化基建等领域:
- 请求失败会弹出一个 toast,如何保证批量请求失败,只弹出一个 toast
- 如何减少项目里面 if-else
- babel-runtime 作用是啥
- 如何实现预览 PDF 文件
- 如何在划词选择的文本上添加右键菜单
- 富文本里面,是如何做到划词的
如何做好前端监控方案如何标准化处理线上用户反馈的问题px 如何转为 rem浏览器有同源策略,但是为何 cdn 请求资源的时候不会有跨域限制cookie 可以实现不同域共享吗axios 是否可以取消请求前端如何实现折善面板效果dom 里面,如何判定 a 元素是否是 b 元素的子元判断一个对象是否为空,包含了其原型链上是否有自定义数据或者方法。该如何判定js 如何判空css 实现翻牌效果flex:1 代表什么一般是怎么做代码重构的如何清理源码里面没有被应用的代码,主要是 JS、TS、CSS 代码前端应用 如何做国际化应用如何做应用灰度发布微前端 为何通常在 微前端 应用隔离不选择 iframe 方案Qiankun 是如何做 JS 隔离的微前端架构一般是如何做 JavaScript 隔离React 循环渲染中 为什么推荐不用 index 做 keyReact 如何避免使用 context 的时候,引起整个挂载节点树的重新渲染前端如何实现截图当 QPS 达到峰值时,该如何处理js 超过 Number 最大值的数怎么处理使用同一个链接,如何实现 PC 打开是 web 应用、手机打开是一个 H5 应用如何保证用户的使用体验如何解决页面请求接口大规模并发问题设计一套全站请求耗时统计工具大文件上传了解多少H5 如何解决移动端适配问题站点一键换肤的实现方式有哪些如何实现网页加载进度条常见图片懒加载方式有哪些cookie 构成部分有哪些扫码登录实现方式DNS 协议了解多少函数式编程了解多少前端水印了解多少什么是领域模型一直在 window 上面挂东西是否有什么风险深度 SEO 优化的方式有哪些,从技术层面来说小程序为什么会有两个线程web 应用中如何对静态资源加载失败的场景做降级处理html 中前缀为 data-开头的元素属性是什么移动端如何实现上拉加载,下拉刷新如何判断 dom 元素是否在可视区域前端如何用 canvas 来做电影院选票功能如何通过设置失效时间清除本地存储的数据如果不使用脚手架,如果用 webpack 构建一个自己的 react 应用用 nodejs 实现一个命令行工具,统计输入目录下面指定代码的行数package.json 里面 sideEffects 属性的作用是啥script 标签上有那些属性,分别作用是啥为什么 SPA 应用都会提供一个 hash 路由,好处是什么React 如何进行路由变化监听单点登录是是什么,具体流程是什么web 网页如何禁止别人移除水印用户访问页面白屏了,原因是啥,如何排查代码实现 JS 中如何实现大对象深度对比如何理解数据驱动视图,有哪些核心要素vue-cli 都做了哪些事儿,有哪些功能JS 执行 100 万个任务,如何保证浏览器不卡顿JS 放在 head 里和放在 body 里有什么区别Eslint 代码检查的过程是啥虚拟滚动加载原理是什么,用 s 代码简单实现一个虚拟滚动加加载React react-router 和原生路由区别html 的行内元素和块级元素的区别介绍 requestIdleCallback apidocumentFragment api 是什么,有哪些使用场景git pull 和 git fetch 有啥区别前端如何做 页面主题色切换前端视角 - 如何保证系统稳定性如何统计长任务时间、长任务执行次数V8 里面的 JIT 是什么用 JS 写一个 cookies 解析函数,输出结果为一个对象vue 中 Scoped styles 是如何实现样式隔离的,原理是啥样式隔离方式有哪些在 JS 中,如何解决递归导致栈溢出问题站点如何防止爬虫ts 项目中,如何使用 node_modules 里面定义的全局类型包到自己项目 src 下面使用不同标签页或窗口间的【主动推送消息机制】的方式有哪 (不借助服务端)React 在 react 项目开发过程中,是否可以不用 react-router,使用浏览器原生 history 路由来组织页面路由在表单校验场景中,如何实现页面视口滚动到报错的位置如何一次性渲染十万条数据还能保证页面不卡顿webpack 打包时 hash 码是如何生成的如何从 0 到 1 搭建前端基建你在开发过程中,使用过哪些 TS 的特性或者能力js 的加载会阻塞浏览器渲染吗浏览器对队头阻塞有什么优化webpack 项目中通过 script 标签引入资源,在项目中如何处理应用上线后,怎么通知用户刷新当前页面HTTP 是一个无状态的协议,那么 web 应用要怎么保持用户的登录态呢如何检测网页空闲状态 (一定时间内无操作)为什么 vite 速度比 Webpack 快列表分页,快速翻页下的竞态问题git 仓库迁移应该怎么操作如何禁止别人调试自己的前端页面代码web 系统里面,如何对图片进行优化OAuth2.0 是什么登录方式单点登录是如何实现的常见的登录鉴权方式有哪些需要在跨域请求中携带另外一个域名下的 Cookie 该如何操作vite 和 webpack 在热更新上有啥区别封装一个请求超时,发起重试的代码前端如何设置请求超时时间 timeoutnodejs 如何充分利用多核 CPU后端一次性返回树形结构数据,数据量非常大,前端该如何处理你认为组件封装的一些基本准则是什么页面加载速度提升 (性能优化) 应该从哪些反向来思考前端日志埋点 SDK 设计思路token 进行身份验证了解多少在前端应用如何进行权限设计低代码平台一般渲染是如何设计的低代码平台一般底层协议是怎么设计的webpack 有哪些优化项目的手段IndexedDB 存储空间大小是如何约束的浏览器的存储有哪些webpack 如何打包运行时 chunk,且在项目工程中,如何去加载这个运行时 chunk为何现在市面上做表格渲染可视化技术的,大多数都是 canvas,而很少用 svg 的在你的项目中,使用过哪些 webpack plugin,说一下他们的作用在你的项目中,使用过哪些 webpack loader,说一下他们的作用React 如何避免不必要的渲染全局样式命名冲突和样式覆盖问题怎么解决React 如何实现专场动画React 从 React 层面上,能做的性能优化有哪些vue 中为何不要把 v-if 和 v-for 同时用在同一个元素上,原理是什么将静态资源缓存在本地的方式有哪些SPA 首屏加载速度慢的怎么解决axios 是如何区分是 nodejs 环境还是 浏览器环境的如何拦截 web 应用的请求前端有哪些跨页面通信方式相关免费在线工具
- 加密/解密文本
使用加密算法(如AES、TripleDES、Rabbit或RC4)加密和解密文本明文。 在线工具,加密/解密文本在线工具,online
- Gemini 图片去水印
基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印,支持批量处理与下载。 在线工具,Gemini 图片去水印在线工具,online
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online