最近在筛简历时发现一个有趣现象：很多自称“精通Vue/React”的候选人，被问到“为什么Vue3要用Proxy替代defineProperty”时，答案依然停留在“性能更好”这种表面说辞；能熟练配置Webpack的人，却说不太清Tree Shaking在ES Modules和CommonJS环境下工作机理的本质差异。
更明显的是面试中的两极分化——一部分人还在卷“手写Promise/虚拟DOM”这类经典八股，另一部分人已经开始被追问“如何为微前端场景设计CSS沙箱”、“如何在React Server Components中处理第三方非兼容库”。前者回答得再流畅，也掩盖不住对现代工程化场景的陌生；后者哪怕某个细节卡壳，展现的却是解决真实复杂问题的思维路径。
这种割裂感背后，是前端技术演进轨迹的明显转向：
“框架熟练工”价值正在稀释 当create-vite、Next.js、Nuxt这类工具链能自动生成80%的配置，当Copilot能补全半数业务组件代码，“会用框架”已从稀缺能力变为入职基线。企业开始默认你应该掌握框架，然后追问：“框架为什么这样设计？它解决了什么特定场景问题？”
“基建感知力”成为分水岭 以前知道Webpack配置算加分项，现在需要理解Vite的预构建如何基于ESM提升冷启动速度、TurboPack的增量计算如何利用Rust重写编译管线。工具链的快速迭代，倒逼你必须建立对底层架构的持续追踪习惯。
“垂直领域穿透”正在重新定义竞争力 可视化工程师得懂WebGL渲染管线和GPU加速；性能优化专家得会解读Core Web Vitals背后浏览器渲染引擎的工作机制；跨端开发者需要理解JS引擎绑定到原生平台的通信损耗在哪——泛泛而谈“我会React”已经不够，需要你在特定纵深领域形成技术解释力。
如果你最近面试时感到“背的题没考，考的题没准备”，或者发现日常工作越来越像在重复调用API，那么下面这组问题或许能帮你定位自己与技术演进方向的偏差：
-
当你说“我熟悉Vite”，是真的理解其基于ESM的按需编译原理，还是仅停留在配置vite.config.js？
-
你简历上的“性能优化”，有多少是 Lighthouse 分数驱动的指标游戏，有多少是真正解决过首屏渲染被第三方脚本阻塞的实际案例？
-
面对“如何设计一个支持版本回滚的前端灰度发布系统”这样的问题，你的思考是从CDN、打包策略、还是从服务端流量切分开始？
前端没有变简单，只是考核重心从“知道什么”转向了“能用知道的东西解决什么”。接下来我将展示100+道项目场景面试题：
1.如何判断用户设备 2.将多次提交压缩成一次提交 3.介绍下navigator.sendBeacon方法 4.混动跟随导航（电梯导航）该如何实现 5退出浏览器之前，发送积压的埋点数据请求，该如何做？ 6.如何统计页面的long task（长任务）【热度：140】 7.PerfoemanceObserver如何测量页面性能 8.移动端如何实现下拉滚动加载（顶部加载） 9.判断页签是否为活跃状态 10.在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？ 11.大文件切片上传的时候，确定切片数量的时候，有那些考量因素 12.页面关闭时执行方法，该如何做 13.如何统计用户 pv 访问的发起请求数量 14.长文本溢出，展开/收起如何实现 15.如何实现鼠标拖拽 16.统计全站每一个静态资源加载耗时，该如何做 17.防止前端页面重复请求 18.ResizeObserver作用是什么 19.要实时统计用户浏览器窗口大小，该如何做 20.当项目报错，你想定位是哪个commit引入的错误的时，该怎么做 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、null、空 map、空 set,都属于为空的数据【热度:640】 40.css 实现翻牌效果【热度: 116】 41.flex:1代表什么【热度: 400】 42.一般是怎么做代码重构的 43.如何清理源码里面没有被应用的代码，主要是 JS、TS.CSS 代码【热度:329】 44.前端应用 如何做国际化?【热度:199】 45.应用如何做应用灰度发布【热度:240】
46.「微前端]为何通常在 微前端 应用隔离，不选择 iframe 方案【热度: 280】 47.[微前端] Qiankun 是如何做 JS 隔离的【热度: 228】 48.[微前端]微前端架构一般是如何做 JavaScript隔离的？ 49.[React]循环渲染中 为什么推荐不用 index 做 key【热度:320】 50.[React]如何避免使用 context 的时候，引起整个挂载节点树的重新渲染【热度: 420】 51.前端如何实现截图? 52.当QPS达到峰值时,该如何处理? 53.js 超过 Number 最大值的数怎么处理? 54.使用同一个链接， 如何实现 PC 打开是 web 应用、手机打开是-个 H5 应用?【腾讯二面】 55.如何保证用户的使用体验【字节一面】 56.如何解决页面请求接口大规模并发问题 【必会】 57.设计一套全站请求耗时统计工具 58.大文件上传了解多少 【百度一面】 59.H5 如何解决移动端适配问题 【美团一面】
60.站点一键换肤的实现方式有哪些?【美团一面】 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 厘性的作用是啥【必会】 81.script 标签上有那些厘性，分别作用是啥?【必会】 82.为什么 SPA 应用都会提供一个 hash 路由，好处是什么? 83.[React]如何进行路由变化监听【字节一面】 84.单点登录是是什么， 具体流程是什么【腾讯一面】
85.web 网页如何禁止别人移除水印【百度一面】 86.用户访问页面白屏了， 原因是啥， 如何排查? 87.[代码实现]JS 中如何实现大对象深度对比 88.如何理解数据驱动视图， 有哪些核心要素?【腾讯二面】 89.vue-cli 都做了哪些事儿，有哪些功能? 90.JS 执行 100 万个任务， 如何保证浏览器不卡顿?【百度一面】 91.JS 放在 head 里和放在 body 里有什么区别? 92.Eslint 代码检查的过程是啥?【必会】 93.虚拟混动加载原理是什么， 用JS 代码简单实现一个虚拟滚动加加载 ……
篇幅限制，文章只贴了题目，答案的话我整理的《2026前端场景面试攻略》里都有，需要的：https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material3
