今年前端面试被问懵的候选人都有同一个软肋

上周帮团队面试了7位候选人，有5年经验的老手栽在了一道"文件上传组件"设计题上——"如何实现断点续传和进度监控？分片策略如何权衡网络波动？失败重传机制怎么设计？"。另一位候选人在被问到"虚拟滚动列表的底层实现"时，从IntersectionObserver说到动态渲染节点池，却在解释滚动条精度补偿时卡了壳。

今年的场景题确实在打破套路：某大厂考在线文档协同编辑的冲突处理方案，另一家要求手写前端监控埋点系统的防重复上报机制。这些题没有八股文的固定话术，但解题过程暴露的正是真实项目中的决策链路——你是否真的理解技术方案背后的业务代价？有没有经历过性能优化中的取舍博弈？

事实上这些高频题藏着共性规律：在线协同文档本质是OT算法与版本锁的组合拳，文件上传组件绕不开Blob.slice和HTTP Range头，虚拟滚动逃不掉动态渲染+视窗计算的配合。只要拆解过20个真实场景案例，就会发现底层逻辑早已在八股文中打过照面。

2025年前端最新场景题面试攻略

• 1、如何判断用户设备
• 2、将多次提交压缩成一次提交
• 3、介绍下navigatorsendBeacon方法
• 4、混动跟随导航(电梯导航)该如何实现
• 5、退出浏览器之前，发送积压的埋点数据请求，该如何做?
• 6、如何统计页面的long task(长任务)【热度:140】
• 7、PerfoemanceObserver如何测量页面性能
• 8、移动端如何实现下拉滚动加载(顶部加载)
• 9、判断页签是否为活跃状态
• 10、在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗
• 11、大文件切片上传的时候，确定切片数量的时候，有那些考量因素
• 12、页面关闭时执行方法，该如何做
• 13、如何统计用户 pv 访问的发起请求数量
• 14、长文本溢出，展开/收起如何实现
• 15、如何实现鼠标拖拽
• 16、统计全站每一个静态资源加载耗时，该如何做
• 17、防止前端页面重复请求
• 18、ResizeObserver作用是什么
• 19、要实时统计用户浏览器窗口大小，该如何做
• 20、当项目报错，你想定位是哪个commit引l入的错误的时，该怎么做
• 21、如何移除一个指定的 commit
• 22、如何还原用户操作流程
• 23、可有办法将请求的调用源码地址包括代码行数也上报上去?
• 24、请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个 toast【热度: 420)
• 25、如何减少项目里面 if-else【热度:310】
• 26、babel-runtime 作用是啥【热度: 200】
• 27、如何实现预览 PDF 文件
• 28、如何在划词选择的文本上添加右键菜单(划词:标滑动选择一组字符，对组字符进行操作)【热度:100】
• 29、富文本里面，是如何做到划词的(鼠标滑动选择一组字符，对组字符进行操作)?【热度:100】
• 30、如何做好前端监控方案【热度:672】
• 31、如何标准化处理线上用户反馈的问题【热度: 631]
• 32、px如何转为 rem【热度: 545】
• 33、浏览器有同源策略，但是为何 cdn 请求资源的时候不会有跨域限制【热度:579]
• 34、cookie 可以实现不同域共享吗【热度: 533】
• 35、axios 是否可以取消请求【热度: 532】
• 36、前端如何实现折香面板效果?
• 37、dom 里面，如何判定a元素是否是b元素的子元素【热度: 400】
• 38、判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。 该如何判定?
• 39、is如何判空?「空」包含了:空数组、空对象、空字符串、0、undefined、nul、空 map、空 set,都属于为空的数据【热度:640】
• 40、css 实现翻牌效果【热度:116】

• 61、如何实现网页加载进度条?【百度一面】
• 62、常见图片懒加载方式有哪些?【京东一面】
• 63、cookie 构成部分有哪些【百度一面】
• 64、扫码登录实现方式 【腾讯一面]
• 65、DNS 协议了解多少【字节一面】
• 66、函数式编程了解多少?【京东一面)
• 67、前端水印了解多少?【腾讯一面】
• 68、什么是领域模型【必会】
• 69、-直在 window 上面挂东西是否有什么风险【百度一面】
• 70、深度 SEO 优化的方式有哪些，从技术层面来说
• 71、小程序为什么会有两个线程【腾讯一面]
• 72、web 应用中如何对静态资源加载失败的场景做降级处理
• 73、html 中前缀为 data- 开头的元素厘性是什么?
• 74、移动端如何实现上拉加载，下拉刷新?【字节一面】
• 75、如何判断dom元素是否在可视区域【字节一面】
• 76、前端如何用 canvas 来做电影院选票功能【美团一面】
• 77、如何通过设置失效时间清除本地存储的数据?【腾讯二面】
• 78、如果不使用脚手架，如果用 webpack 构建一个自己的 react 应用
• 79、用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数
• 80、package,json 里面 sideEffects 厘性的作用是啥【必会】

• 102、V8 里面的 JT 是什么?【京东一面】
• 103、用JS 写一个 cookies 解析函数， 输出结果为一个对象
• 104、vue 中 Scoped Styles 是如何实现样式隔离的，原理是啥
• 105、样式阿商方式有哪些【字节一面】
• 106、在JS 中，如何解决递归导致栈溢出问题?
• 107、站点如何防止爬虫?【百度一面】
• 108、ts 项目中，如何使用 node modules 里面定义的全局类型包到自己项目 src 下面使用?【百度二面】
• 109、不同标签页或窗口间的 【主动推送消息机制】 的方式有哪些?(不借助服务端)
• 110、【React】在react 项目开发过程中，是否可以不用 react router使用浏览器原生 history 路由来组织页面路由?
• 111、在表单校验场景中，如何实现页面视口滚动到报错的位置
• 112、如何一次性渲染十万条数据还能保证页面不卡顿【百度二面】
• 113、【webpack】打包时 hash 码是如何生成的【必会】
• 114、如何从 0 到1搭建前端基建【京东一面】
• 115、你在开发过程中，使用过哪些 TS 的特性或者能力?【美团一面】
• 116、JS 的加载会阻塞浏览器渲染吗?【百度一面】
• 117、浏览器对队头阻骞有什么优化?【百度一面】

面试小贴士：别临时抱佛脚，成功属于有准备的人！文中PDF【点击此处】即可huo取！加油呀