因为淋过雨，所以想给前端人说点真心话
我面过很多人，也被面过很多次。
从被问到“你连原型链都说不清”，到后来坐在桌子另一边面试别人。
今天这些话，是淋过雨之后，真想端给前端人的一碗汤。
一、关于面试：你以为考的是技术，其实考的是“能不能干活”
很多前端人准备面试，一头扎进：
- 手写防抖节流
- 背Vue/React生命周期
- 刷LeetCode
这些当然要会，但面试官真正想确认的是三件事：
- 把你丢进项目里，能不能独立负责一个模块
- 遇到线上Bug，能不能快速定位 + 止损
- 给你一个模糊需求，能不能拆解 + 落地
所以别再只背八股文了。
面试官一旦问“你做过什么”“怎么做的”“遇到什么困难”，就是在验证你能不能干活。
二、关于空白期：别怕Gap，怕的是“Gap但什么都没留下”
我面过一个女生，简历上写着“2024年3月至今：Gap Year”。
换作以前，我会犹豫。
但她用半小时告诉我：空白期也可以很硬核。
她做了三件事：
- 用Vue3+TS重构个人博客，接入CI/CD
- 给开源UI组件库提了5个PR，全被Merge
- 啃完《Vue.js设计与实现》，能讲清楚响应式原理
真心话：
空白期不是减分项， 空白期什么都没做才是。
哪怕只做一个完整项目 + 一篇技术文章 + 一次开源贡献，都比“我学了但没产出”强十倍。
三、关于技术栈：不要“样样通，样样松”
很多前端人简历上写：
熟练使用Vue、React、Angular、小程序、Node.js、Three.js…
面试官内心OS：大概率哪个都不深。
我见过最聪明的回答是：
“目前对Vue3生态（Pinia + Vite + Vue Router）比较熟悉。
虽然不敢说精通所有框架，但我花时间啃了《Vue.js设计与实现》，理解核心原理。
最近在攻关Next.js服务端渲染优化。”
真心话：
面试官不指望你什么都会，但希望你至少有一个深水区。
一个能讲清楚原理 + 踩过坑 + 有项目落地的技术栈，远胜过十个“熟练使用”。
四、关于项目：别讲“我做了什么”，要讲“我解决了什么问题”
这是最普遍的误区。
❌ 错误示范：
“我用Vue写了后台管理系统，包括用户管理、权限管理、订单管理。”
✅ 正确示范：
“后台管理系统的权限路由一开始是前端写死的，每次加角色都要改代码。
我重新设计了 动态路由表 + 按钮级权限方案，后端返回权限码，前端递归生成路由。
上线后，新角色上线时间从2小时缩短到5分钟。”
真心话：
面试官想听的不是你做过什么功能，而是：
- 你遇到了什么问题
- 你是怎么思考的
- 你带来了什么价值
问题 → 方案 → 结果，永远是最好的项目表达公式。
五、关于Bug排查：这是区分“会写代码”和“能干活”的分水岭
很多人一被问“遇到复杂Bug怎么查”，就回答“console.log”。
但真正让面试官眼前一亮的是这样的回答：
“遇到内存泄漏，我会：
- 用Chrome DevTools Memory面板抓快照对比
- 检查全局事件监听、定时器、闭包引用
- 用performance.memory监控趋势
- 定位后在组件销毁时清理引用”
真心话：
Bug排查能力 = 工程经验的直接体现。
你不需要记得所有API，但一定要有方法论。
六、关于职业规划：别只说“我想成长”，要说“我想解决什么问题”
❌ 错误回答：
“我想尽快成长，成为技术负责人。”
✅ 让人记住的回答：
“短期：成为团队里最懂性能优化的前端，能独立定位首屏慢、内存高的问题；
中期：主导一个中后台项目的架构升级，推动组件化和工程化规范；
长期：能参与定义前端技术方向，帮助新人成长。”
真心话：
规划不需要很宏大，但要落到具体的能力和事情上。
面试官想知道的是：给你三年，你能变成什么样的人。
七、最后几句真心话
- 八股文要背，但不能只会背
能讲清楚原理，更要能讲清楚“在哪里用过”。 - 简历是面试的起点，不是终点
写在简历上的每一个技术点，都要做好被问到底的准备。 - 不会可以学，但不能撒谎
说“了解”和“精通”之间，隔着无数个踩过的坑。 - 前端不只是写页面
工程化、性能、安全、协作、体验，每一个方向都值得深挖。 - 如果你现在面得不好，没关系
我也曾被问得哑口无言。
关键是：每次面试后，把不会的问题变成下一个会的问题。
淋过雨的人，总想给别人撑把伞。
希望这篇文章，能让你在准备面试的路上，少淋一点雨。
下面👇面试题库👇
https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material3
React
1.说说对受控组件和非受控组件的理解，以及应用场景?
2.你在React项目中是如何使用Redux的?项目结构是如何划分的?
3.说说对Redux中间件的理解?常用的中间件有哪些?实现原理?
4.说说你对Redux的理解?其工作原理?
5.说说你对immutable的理解?如何应用在react项目中?
6.说说React Jsx转换成真实DOM过程?
7.说说你在React项目是如何捕获错误的?
8.说说React服务端渲染怎么做?原理是什么?
9.React Fiber是如何实现更新过程可控?
10.Fiber为什么是 React 性能的一个飞跃?
11.setstate 是同步，还是异步的?
12.简述下 React 的事件代理机制?
13.简述下 React 的生命周期?每个生命周期都做了什么?
14.为什么不能在循环、条件或嵌套函数中调用 Hooks?
15.如何让 useEffect 支持 async/await?
16.我们应该在什么场景下使用 useMemo和 useCallback?
17.说说你对 React Hook的闭包陷阱的理解，有哪些解决方案?
18.React中，怎么实现父组件调用子组件中的方法?
...........................................................
Vue
1.如果使用Vue3.0实现一个 Modal，你会怎么进行设计?
2.Vue 3.0中Treeshaking特性是什么，并举例进行说明?
3.Vue3.0性能提升主要是通过哪几方面体现的?
4.Vue3.0的设计目标是什么?做了哪些优化?
5.你是怎么处理vue项目中的错误的?
6.Vue项目中如何解决跨域问题?
7.Vue怎么实现权限管理?控制到按钮级别的权限怎么做?
8.大型项目中，Vue项目怎么划分结构和划分组件比较合理呢?
9.Vue项目中有封装过axios吗?怎么封装的?
10.说说vue中的diff算法
11.什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
12.说说你对Vue中 keep-alive 的理解
13.说说你对slot的理解?slot使用场景有哪些?
14.说说你对vue的mixin的理解，以及有哪些应用场景?
15.Vue中的SnextTick有什么作用?
16.Vue组件间通信方式都有哪些?
17.Vue中组件和插件有什么区别?
18.为什么Vue中的data属性是一个函数而不是一个对象?
...........................................................
JavaScript
1.不会冒泡的事件有哪些?
2.mouseEnter和 mouseOver 有什么区别?
3.MessageChannel 是什么，有什么使用场景?
4.async、await 实现原理
5.Proxy 能够监听到对象中的对象的引用吗?
6.如何让 var [a, b]= {a: 1,b: 2}解构赋值成功?
7.下面代码会输出什么?
8.描述下列代码的执行结果
9.什么是作用域链?
10.bind、call、apply 有什么区别?如何实现-个bind?
11.common.js和es6中模块引入的区别?
12.说说 vue3 中的响应式设计原理
13.saript标签放在header里和放在body底部里有什么区别?
14.下面代码中，点击“+3”按钮后，age 的值是什么?
15.Vue中，created和mounted两个钩子之间调用时间差值受什么影响?
16.vue中，推荐在哪个生命周期发起请求
17.为什么Node在使用es module时必须加上文件扩展名
18.package.json 文件中的 devDependencies 和 dependencies 对象有什么区别？
...........................................................
前端工程化
1.webpack5 的主要升级点有哪些?
2.说下vite的原理
3.与webpack类似的工具还有哪些?区别?
4.说说如何借助webpack来优化前端性能?
5.说说webpack proxy工作原埋?为什么能解决跨域?
6.说说webpack的热更新是如何做到的?原埋是什么?
7.说说webpack的构建流程?
8.说说你对webpack的理解?解决了什么问题?
9.webpackloader和 plugin 实现原埋
10.如何提高webpack的构建速度?
11.说说 webpack-dev-server的原埋
12.你对 babel 了解吗，能不能说说几个 stage 代表什么意思?
13.webpack的module、bundle、chunk分别指的是什么?
14.说说你对前端工程化的理解
15.说说你对 SSG 的理解
16.聊聊 vite 和webpack 的区别
17.如何提高webpack的打包速度
18.如何用webpack来优化前端性能
19.webpack的Loader和Plugin的不同
...........................................................
ES6
1.ES6中函数新增了哪些扩展?
2.ES6中对象新增了哪些扩展?
3.ES6中数组新增了哪些扩展?
4.JavaScript中的简单数据类型有哪些?
5.var、let、const之间有什么区别?
6.ES6有哪些新特性?
7.如何把一个对象变成可选代对象?
8.说说你对 lterator,Generator和 Async/Await 的理解
9.Map和 WeakMap 有什么区别?
10.说说你对 new.target 的理解
11.async/await 怎么进行错误处理?
12.说说对 ES6 中rest参数的理解
13.箭头函数的 this 指向哪里?
15.谈谈 Object.defineProperty与 Proxy 的区别
16.ES6中的 Reflect 对象有什么用?
17.简单介绍下 ES6 中的 lterator迭代器
18.如何中断Promise?
19.async/await和 Promise 有什么关系?
...........................................................
TypeScript
1. TypeScript中的 Declare 关键字有什么用?
2.解释-下TypeScript中的枚举。
3.TypeScript 的主要特点是什么?
4.TypeScript中的方法重写是什么?
5.什么是TypeScript映射文件?
6.TypeScript中的类型有哪些?
7.如何检查TypeScript中的null和undefined ?
8.如何在TypeScript中实现继承?
9.什么是TypeScript Declare关键字?
10.TypeScript和]avaScript 的区别是什么?
11.Typescript中什么是类类型接口?
12.Typescript中never 和 void 的区别?
13.[ypescript中 interface 和 type 的差别是什么?
14.TypeScript中的变量以及如何声明?
15.Typescript 中的类是什么?你如何定义它们?
16.Typescript中什么是装饰器，它们可以应用于什么?
17.解释如何使用 TypeScript mixin。
18.TypeScript 中的类型断言是什么?
19.TypeScript 中的模块是什么?
...........................................................
计算机网络
1.简单描述从输入网址到页面显示的过程
2.说说WebSocket和HTTP的区别
3.说说 https 的握手过程
4.HTTP2中，多路复用的原理是什么?
5.说说你对“三次握手"、“四次挥手”的理解
6.为什么推荐将静态资源放到cdn上?
7.什么是DNS劫持?
8.HTTP 报文结构是怎样的?
9. HTTPS 为什么是安全的?
10.Axios的原理是什么?
11.说说对 HTTP3 的了解
12.跨域时怎么处理 cookie?
13.POST请求的 Content-Type 常见的有哪几种?
14.Blob，ArrayBuffer，Base64分别有哪些使用场景?
15.Blob, ArrayBuffer, Base64 有什么区别?
16.TCP 和 UDP的区别是什么?
17.Http 3.0 是基于 udp 的，那么它是如何保证传输可靠性的?
18.说下 websocket 的连接原理
19.https是如何保证安全的，又是如何保证不被中间人攻击的?
...........................................................
祝你面出自己想要的offer~
