阶段六 · 前端开发工程（本课导读）
课程定位：成为能独立交付高质量 Web 应用的前端工程师。从「会写页面」到「懂浏览器、会优化、能上大厂」。 前置条件：阶段二（JS 语族至少入门）+ 阶段三（算法、网络重点）。 时长建议：2~3 个月。 注：如果你走后端路线，本阶段可以只快速过一遍，不必深挖。
一、开场案例：为什么同一个页面，你的 60 帧，他的 5 帧？
小白问老师：「老师，我用了最新的框架、最新的语法，页面为什么还是卡卡的？滚动一下就掉帧。」
老师反问：「你知道浏览器渲染一帧要经过哪几步吗？」
小白：「呃……不知道。」
老师：「这就是问题。你不会『浏览器原理』，就只能靠运气写前端。浏览器每 16.6ms 要完成：JS 执行 → 样式计算 → 布局 → 绘制 → 合成。你只要在某一步多做了一点点事，比如强制同步布局、频繁操作 DOM，一帧就超时了，页面就卡。」
小白：「原来前端不是『写 HTML/CSS/JS』，是『在浏览器的规则下做优化』！」
老师：「对。所以这阶段的主线是：先用『重学前端』和『浏览器工作原理』把底层打牢，再学 React/Vue 框架（它们是工具，不是全部），最后学 webpack、性能优化、小程序、Electron——把自己从『页面仔』变成『前端工程师』。」
案例启示：某公司一个复杂的营销页，交互工程师用 jQuery 一顿操作，数据一多直接卡死；另一位工程师用「虚拟 DOM + 批量更新 + 合理布局」重写后，丝般顺滑。差在哪？差在对浏览器渲染机制的理解。
二、这一阶段学什么？
| 模块 | 对应课程 | 核心收获 |
|---|---|---|
| 前端世界观 | 重学前端 ★ | 前端知识全景，查漏补缺 |
| 浏览器内核 | 浏览器工作原理与实践 ★、图解 Google V8 | 渲染、JS 执行、内存、性能 |
| React 系 | React 实战进阶 45 讲 ★、React Hooks 核心原理、现代 React Web 开发实战 | 主流框架之一 |
| Vue 系 | Vue 开发实战 ★、Vue 3 企业级项目实战课 | 主流框架之二 |
| 工程化 | 玩转 webpack | 构建与打包 |
| 桌面与移动 | Electron 开发实战、微信小程序全栈开发实战、9 小时搞定小程序、React Native 新架构 | 多端能力 |
| 性能优化 | 前端全链路性能优化实战 ★ | 优化体系 |
三、怎么学最有效？
- JS 先行：框架再牛，JS 不行就是空中楼阁。如果 JS 还没吃透，回到阶段二补。
- 理解浏览器：把「渲染流程、事件循环、内存管理」当成必学，而不是可选项。它决定你能不能写出「不卡」的应用。
- React / Vue 二选一精学，另一个了解：别两个都半吊子。面试主打一个，简历上另一个写「了解」。
- 做 3 个拿得出手的项目：一个管理后台（React/Vue + 组件库）、一个移动端 H5 或小程序、一个带性能优化的复杂页面。作品集才是硬通货。
四、学完检验（自测清单）
- 能说出浏览器从输入 URL 到渲染出页面的完整过程
- 能解释重排、重绘、合成，并说出至少 3 种避免卡顿的写法
- 能用 React 或 Vue 独立开发一个完整项目（组件化、状态管理、路由）
- 能说出虚拟 DOM 的原理与 diff 过程
- 能用 webpack/Vite 配置一个项目，理解打包产物
- 能说出至少 5 种前端性能优化手段（资源、渲染、网络、缓存、代码分割）
全打勾，进入
07_阶段七_架构与分布式/。