前端面试学习流程

1.javascript

https://zh.javascript.info/

2.react

https://zh-hans.react.dev/versions

1️⃣ Redux（最经典）

👉 Redux 官方文档

🔗 https://redux.js.org/

特点：

体系最完整（适合大厂）
面试出现频率最高
要重点看：
- 核心三原则
- Redux Toolkit（现在主流）

2️⃣ MobX（响应式流派）

👉 MobX 官方文档

🔗 https://mobx.js.org/

特点：

上手简单
响应式自动更新
面试重点：
- observable / autorun
- 和 Redux 的区别

3️⃣ Zustand（轻量新趋势）

👉 Zustand 官方文档

🔗 https://zustand-demo.pmnd.rs/

特点：

极简（大厂越来越爱问）
无 Provider
面试重点：
- 为什么比 Redux 简单？
- 内部原理（订阅机制）

🚀 1️⃣ 构建工具（Webpack / Vite）

📦 Webpack 官方学习

👉 Webpack 官方文档

🔗 https://webpack.js.org/

重点看这些👇

Concepts（核心概念）
- Entry / Output
- Loader
- Plugin
Configuration（配置）
Guides（非常重要！）

⚡ Vite 官方学习

👉 Vite 官方文档

🔗 https://vitejs.dev/

重点看👇

为什么开发环境快（ESM）
为什么构建用 Rollup
HMR 原理

📚 补充（强烈推荐）

👉 掘金

🔗 https://juejin.cn/

直接搜：

"Webpack 打包流程"
"Vite 原理"

👉 面试讲解会更接地气（大厂常考）

🧠 你必须会讲（面试高频）

👉 loader vs plugin（必须会）

loader：处理文件（转换代码）
plugin：扩展能力（生命周期钩子）

👉 Webpack 打包流程（核心）

你至少要能讲出👇：

初始化参数（webpack.config.js）
构建依赖图（从 entry 开始）
调用 loader 转换文件
调用 plugin（在各个阶段）
生成 bundle 输出

👉 能讲到这里 = 超过80%候选人

🚀 2️⃣ 微前端（qiankun）

🧩 qiankun 官方

👉 qiankun 官方文档

🔗 https://qiankun.umijs.org/

📚 补充学习

👉 微前端（GitHub awesome）

🔗 https://github.com/umijs/qiankun

👉 掘金

🔗 https://juejin.cn/

搜：

"qiankun 原理"
"微前端沙箱机制"

🧠 你必须会讲（面试高频）

👉 qiankun 原理（简化版要会说）

主应用加载子应用（HTML Entry）
JS 沙箱隔离
CSS 隔离
生命周期（mount / unmount）

👉 沙箱机制（重点加分）

你要会讲👇3种：

1️⃣ 快照沙箱（Snapshot）

记录 window 状态
切换时恢复

2️⃣ 代理沙箱（Proxy）⭐（重点）

用 Proxy 代理 window
不污染全局

3️⃣ 多实例沙箱

支持多个子应用同时运行

🎯 总结（你要达到的水平）

面试时你要能做到👇：

👉 Webpack：能讲打包流程

👉 Vite：能讲"为什么快"

👉 qiankun：能讲沙箱原理

✅ 第1周：基础 + 原理（补"深度"）

重点突破👇

1️⃣ JavaScript 核心（必须会讲）

闭包 / 作用域链
原型链
this 指向
事件循环（宏任务/微任务）

👉 推荐免费：

JavaScript.info（超系统）
MDN Web Docs（查细节）

2️⃣ 浏览器原理（大厂必问）

从输入 URL 到页面展示
HTTP / HTTPS
缓存（强缓存 / 协商缓存）
渲染流程（重排 / 重绘）

👉 重点题：

"浏览器渲染流程"
"为什么会白屏？"

✅ 第2周：React 深度（你要重点拉开差距）

1️⃣ React 原理（核心）

Fiber 架构
diff 算法
hooks 原理（你刚问这个！重点）

👉 推荐：

React 官方文档（新文档讲得很好）

2️⃣ 状态管理对比（你有优势）

你会：

Redux / MobX / Zustand

👉 要能讲：

为什么 Zustand 更轻？
Redux 为什么复杂？
场景选择

3️⃣ 必背题

useEffect 和 useLayoutEffect
为什么 hooks 不能写在 if（你刚学的）
React 性能优化方案

✅ 第3周：工程化 + 架构（决定你30K的关键）

1️⃣ 构建工具（重点）

Webpack 原理
Vite 为什么快

👉 必会讲：

loader vs plugin
打包流程

2️⃣ 微前端（你简历有 = 加分项）

qiankun 原理
沙箱机制

3️⃣ 项目架构表达（最重要）

你必须准备：

👉 3个项目：

电商项目（主打）
数据平台（复杂度）
中台（架构能力）

每个要能讲：

架构设计
性能优化
难点

✅ 第4周：刷题 + 模拟面试（冲刺）

免费刷题平台👇

1️⃣ 算法 + JS

LeetCode（免费题够用）
牛客网（面经很多）

2️⃣ 前端面试题

前端面试题（GitHub）
掘金（大量免费总结）

3️⃣ 八股文（重点背）

手写 Promise
防抖节流
深拷贝
事件循环