今天面试了一个半吊子前端人，瞬间崩溃
结束面试，坐下来缓了好久才平复心情
这位候选人，简历写得挺漂亮：“精通Vue/React”“熟练搭建前端架构”“独立负责项目模块”……看着像是能立马上手干活的主力。可我随便深挖几个问题，整个人就开始支支吾吾，技术漏洞全暴露了。
不是想嘲笑谁，而是觉得有必要把这场对话还原一下——给还在准备入行、实习、找工作的前端新人提个醒，也分享点真实职场里技术考察的“听音辨人”逻辑。
📌 Q1：你怎么判断一个前端项目的代码质量？
她说： “代码能跑起来、功能正常就行。”
专业视角应该是： 功能正常只是底线。要看代码结构是否清晰（模块化、组件化），是否遵循团队的编码规范（ESLint/Prettier），是否有可维护性（注释、文档），是否考虑了性能（渲染优化、包体积）和安全性（XSS防护）。更重要的是，是否有单元测试、可调试性如何。否则，项目初期能跑，后期必然变成“屎山”。
📌 Q2：如果页面在生产环境突然白屏，你怎么排查？
她答： “先刷新试试，不行就找后端。”
现实中，我们希望： 先打开浏览器控制台看报错信息，确认是资源加载失败、JS执行错误还是接口异常；接着用Sentry/监控平台定位错误堆栈和用户操作路径；如果是接口问题，查看网络请求状态和日志；如果是前端代码问题，结合SourceMap定位源码位置。最后，带着“错误现象+可能原因+临时解决方案”同步团队。主动定位问题，比甩锅更重要。
📌 Q3：前端工程化你常用哪些工具或流程？
她说： “就是用Webpack打包一下。”
可我们在意的是： 你有没有用Babel编译兼容、用ESLint规范代码、用Husky做Git提交前检查？会不会用Tree Shaking减少打包体积？是否配置过代码分割懒加载？是否用CI/CD自动化部署？更关键的是——你能否说清楚每一步解决什么问题？
📌 Q4：...................
话不多说，给大家展示一些干货↓↓↓
总览：地址
因为篇幅原因，下面就只能截图部分内容展示了，有想要的小伙伴可以： “点此即可”无偿领取完整文档
一、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-coder/natural_traffic/wiki/scan_material3
