昨天面了3个前端岗，都没过聊聊，被挂原因
很多人面试前端开发，总觉得只要会背八股、答几个手写题就能过。
但实际情况是——面试官更看重你的工程化思维和解决实际问题的能力，而不是你嘴里蹦出的标准API。
记住：语法次要，思路和原理才是关键。
举几个常见问题👇
1️⃣ 首屏加载速度慢，如何排查和优化？
普通答法：做路由懒加载，或者上
CDN。
优化思路：性能优化不是玄学，要有数据支撑的排查链路。
首先，通过 Lighthouse
或 Performance API 定位瓶颈是网络传输、脚本执行还是渲染阻塞。然后针对性优化：如拆包策略、图片压缩格式、服务端渲染（SSR）或流式渲染。能讲出从“发现问题”到“制定方案”再到“验证效果”的完整闭环，才是面试官真正期待的答案。
2️⃣ Vue 的 v-if 和 v-show 区别是什么？
普通答法：v-if 是真正渲染，v-show 是 display 切换。
优化思路：这不仅是API区别，更是渲染成本与交互频率的权衡。
v-if 适用于运行时条件极少变化的场景，能减少初始化渲染压力；v-show 适用于频繁切换的场景，能避免反复创建和销毁组件的开销。结合具体业务场景讲选择依据，才是面试加分点。
3️⃣ 如何确保前端项目的代码质量？
普通答法：写规范，用
ESLint，走 CR。
优化思路：代码质量不能靠“自觉”，要靠流程和工具保障。
在开发阶段：通过 husky
+ lint-staged 做增量检查，拦截低级错误；
在 MR 阶段：通过
CI 流水线跑单元测试、构建验证，确保合码不崩主分支；
在发布阶段：通过版本控制和变更日志，保证可回溯、可回滚。能讲出质量内建（Built-in Quality）的思路，才是资深工程师的体现。
4️⃣ 前端开发的的价值体现在哪？
普通答法：把页面写出来，把效果做出来。
优化思路：前端真正的价值在于用户体验和工程效率。
在需求阶段：通过交互评审，预判实现成本和用户体验的平衡点；
在开发阶段：通过组件抽象和工程化配置，提升团队交付效率；
在上线后：通过监控和埋点，持续优化性能和业务转化率。
换句话说，前端不只是“写页面”，而是“用技术手段为业务和用户创造确定性”。
面试时千万别“一问一答”，更不要只背八股。
要学会结合实际场景，展现你的技术深度、业务理解和工程化思维！！！
github：
- 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 中前缀为>