上午面试了几个前端岗，本来简历适配度超高，我都做好发offer的准备了，结果面试现场“翻车”严重。
基础问题回答得磕磕绊绊，逻辑混乱，甚至直接说不知道。问简历上的项目经历，也都吞吞吐吐讲不清楚，这面试态度嘛，还真得打个问号？？？
在这儿给大家提个醒，想要拿到offer，这些坑可得避开
“聊聊前端开发的主要工作流程？”
- ❌ “写页面，做交互。”
- ✅ 前端早就不只是“画页面”了。标准流程是：从理解需求、UI还原、写逻辑、联调接口，到 性能优化、多端测试、配合部署上线，再到后续维护迭代——全程都要关注用户体验和性能表现。这么说，能体现你具备完整的产品交付视角。
“如何保证你开发的组件/页面质量？”
- ❌ “写完自己点一点看看。”
- ✅ 我采用多层质量防线：单元测试覆盖核心逻辑、组件测试验证UI交互、E2E测试保障关键流程。再配合ESLint/Prettier 统一代码风格，加上严格的 Code Review，形成闭环。
“CI/CD 在你们项目中是怎么应用的？”
- ❌ “不是很清楚具体流程。”
- ✅ 我们借助 Git Hook或 CI 平台（如 Jenkins/GitLab CI），在代码提交后自动触发流水线：安装依赖 → 代码检查 → 跑测试 → 构建打包 → 自动部署到测试环境。这一套能快速拦截问题，确保主分支随时可发布。
“遇到复杂难定位的线上Bug，你怎么处理？”
- ❌ “刷新看看，不行就找后端。”
- ✅ 结构化思路： 1.复现：锁定出现问题的环境与操作路径； 2.定位：查 Console/Network，利用 Source Map 还原代码，结合 Sentry 日志与用户行为记录； 3.归因：判断是前端逻辑、数据异常、兼容性还是依赖问题； 4.修复：小范围验证确保有效； 5.协作：清晰同步问题根因，必要时拉后端一起排查； 6.沉淀：思考如何增加测试用例或监控，避免同类问题。
以下是现在前端面试官兜兜转转都在用的模块：
一、Vue面试题
说说 vue动态权限绑定渲染列表〔权限列表渲染)
Vue用的哪种设计模式
说说vue操作真实dom性能瓶颈
Vue中如何获取dom、操作dom、更新dom
Vue的双向数据绑定原理是什么
mvvm框架是什么
谈谈Vue的token存储
知道nextTick的作用吗，谈谈对它的理解，是什么，怎么用
nextTick和setTimeout区别
vue中为什么用虚拟dom而不操作真实dom
Vue如何进行组件传值
说说vue里面的父子通信
谈谈如何实现vue组件通信和传值方式(两个问题为同一个答案问法不一样)
说说vue中Key值的作用
说说vue中的虚拟dom和diff算法
vue3.0有了解过吗，你觉得vue3.0好吗，好在哪
VUE组件如何与iframe通信问题
二、 React面试题
说说React中onClick绑定后的工作原理
说说react里面bind与箭头函数
说说react中的性能优化
高阶组件和高阶函数是什么
setState和repalceState的区别
redux中核心组件有哪些,reducer的作用
什么是受控组件
hooks+context和redux你是怎么选择的，都在什么场景下使用
useffect模拟生命周期
setsate更新之后和usestate的区别
react父组件props变化的时候子组件怎么监听
usememo在react中怎么使用
React Hooks各种函数介绍
React Component和Purecomponent区别
hooks相对于class的优化
hooks父组件怎么调用子组件的方法
讲一下react中的通信
react通过什么方法修改参数
说你对react native的了解
redux的实现原理
三、小程序面试题
简单谈谈微信小程序
小程序的原生组件有哪些
小程序的安卓版和ios版是怎么开发出来
uni-app弹窗被覆盖怎么解决
小程序生命周期
小程序路由跳转
小程序的兼容问题有哪些
小程序框架都学握哪一些,uniapp都会哪一些，平时开发遇到的困难
小程序怎么获取手机号
小程序的登录流程
小程序如果版本更新了怎么通知用户
小程序嵌入H5页面怎么做
小程序的生命周期函数有哪些?分别有什么作用?
四、Webpack面试题
webpack了解吗，讲一讲原理，怎么压缩代码
webpack怎么配置
webpack怎么打包
vue打包内存过大，怎么使用webpack来进行优化
webpack打包用过什么插件
说说gulp和webpack的区别
五、TypeScript面试题
了解过TS吗?
使用ts写一个对象属性约束
说一下typescript中的泛型
如何在TS中对函数的返回值进行类型约束
ts和js相比有什么区别
RX了解吗？
六、Node.JS面试题
说说对nodejs的了解
nodejs如何写接口，返回参数如何处理，有多少种方法
websocket和http的区别
常见的 HTTP Method有哪些?GET/POST区别?
说一说Tcp三次握手，四次挥手
阐述一下http1.O与http2.0的区别,及http和https区别
node.js如何导出页面数据形成报表
协商缓存和强缓存
强缓存
Expires
Cache-Control
协商缓存
Etag和If-None-Match
Last-Modify/lf-Modify-Since
为什么要有Etag
http常用状态码有哪一些，说—说他们的作用
网络攻击方案有哪些，自己有写过什么安全性方面的东西吗?
静态资源部署到哪?
说说你对nodejs的了解
七、GIT面试题
git经常用哪些指令
git出现代码冲突怎么解决
你们团队是怎么管理git分支的
如何实现Git的免密操作
八、其它面试题
loadsh了解过吗?
是否用过混合APP开发
项目中的组件是如何使用的
hash和histoty的原理
window.location.href和history.push的区别
商城项目中有写到调用微信，支付宝支付，简单讲述—下
这个支付与后台对接的过程，微信支付的原理
混合开发知道吗?你是怎么理解混合开发的,在项目中用到过混合开发吗?
平时工作中有是香有接触linux系统?说说常用到linux命令?
echarts是什么，怎么用
Hash和history的区别
谈谈宏任务与微任务的理解，举一个宏任务与微任务的api
对Event loop的了解?
有想要的小伙伴可以领取：
https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material1
