徐术挺-漫思录

课程学习指南

20分钟阅读

阶段六 · 课程学习指南

本阶段按「前端世界观 → 浏览器内核 → React 系 → Vue 系 → 工程化 → 多端 → 性能」组织。★ 为必学主干。

一、前端世界观

1. 重学前端 ★（第一门，建立知识全景）

为什么学：前端知识碎片化严重（HTML/CSS/JS/框架/工程化……），这门课帮你建立一个「前端全景地图」——从语言、到浏览器、到工程化、到性能，像拼图一样把碎片拼成体系。很多人学了几年前端，是靠它第一次看清「前端全貌」的。

知识地图：

  • 前端技术全景：语言、浏览器、工程、性能、安全
  • JavaScript 语言核心机制（作用域、原型、异步）
  • CSS 体系（布局、动画、响应式）
  • 浏览器渲染与网络
  • 前端工程化与组件化
  • 前端性能与安全

经典案例：小白问「我 CSS 写得挺溜，为什么面试官还说我基础不牢？」老师：「你会写 flex，但你知不知道 flex: 1 到底是哪三个属性的缩写？会写 position: absolute，但知道它相对谁定位、受什么影响吗？『会用』和『懂原理』的差距，就是高级前端和中级前端的分水岭。」

引发思考：

  1. display: none 和 visibility: hidden 的区别是什么？（重排 vs 重绘）
  2. 为什么说「CSS 不是一门『简单』的语言」？它复杂在哪？
  3. 前端工程师的知识结构，应该怎么分层？你现在缺哪一层？

二、浏览器内核

2. 浏览器工作原理与实践 ★（必学，前端内功）

为什么学：这是前端进阶最重要的课之一。它讲透浏览器的「四驾马车」——页面渲染、JavaScript 执行、网络、安全。懂了它，你会明白：为什么某些代码卡、某些代码快、某些安全漏洞怎么来的。

知识地图：

  • 浏览器架构与多进程模型
  • 导航流程：输入 URL 到页面显示
  • 渲染流程：HTML/CSS/JS 如何变成像素
  • 重排、重绘、合成
  • V8 与 JS 执行、事件循环
  • 浏览器缓存与网络
  • 浏览器安全（XSS、CSRF、CSP）

经典案例：小白问「为什么把 script 标签放 body 底部就能避免页面白屏？」老师：「因为 HTML 解析是边下载边渲染的，而 script 会『阻塞解析』——浏览器遇到同步脚本必须等它执行完才继续。放底部，页面先渲染完，用户先看到内容；放顶部，页面就卡在脚本上。同理，async 和 defer 也是为这个设计的。」

引发思考：

  1. 重排（reflow）和重绘（repaint）的区别？为什么重排更贵？
  2. 为什么频繁改 DOM 会卡？「批处理」和「虚拟 DOM」是怎么解决的？
  3. 一个 60fps 的滚动动画，每一帧你都应该避免做哪三件事？
  4. 浏览器为什么采用多进程架构？一个标签页崩溃为什么不会拖垮整个浏览器？

3. 图解 Google V8（选学，JS 引擎深挖）

为什么学：V8 是 Chrome/Node.js 的 JS 引擎。懂它，你就懂：JS 是怎么被编译执行的、为什么有的代码快有的代码慢、怎么写出「V8 喜欢」的高性能代码。

知识地图：

  • V8 的编译管线：Ignition 解释器 + TurboFan 编译器
  • 隐藏类（Hidden Class）与内联缓存
  • 对象、数组的内存表示
  • 垃圾回收：新生代/老生代、标记清除
  • 事件循环与宏任务/微任务
  • 性能优化建议（monomorphic、避免 deopt……）

经典案例：小白问「为什么同样的代码，把属性顺序打乱就慢了？」老师：「V8 用『隐藏类』优化属性访问——对象的属性创建顺序不同，隐藏类就不同，可能无法复用优化后的代码，甚至触发反优化（deopt）。所以写 JS 别随手给对象乱加属性，保持形状稳定，V8 才能起飞。」

引发思考：

  1. 为什么说「JS 是解释型语言」并不完全准确？（JIT 即时编译）
  2. 微任务队列和宏任务队列，V8 是怎么调度它们的？
  3. 你能说出至少 3 条「让 V8 跑得更快」的写法吗？

三、React 系

4. React 实战进阶 45 讲 ★（必学，主流框架）

为什么学：React 是全世界用得最多的前端框架（大厂标配）。这门课从组件、状态管理到 Hooks、性能优化、SSR，带你把 React 学到「能实战、能面试」。

知识地图：

  • JSX 与组件化思维
  • 状态与生命周期（Class 与 Hooks 两代）
  • Props、Context、状态提升
  • Hooks：useState/useEffect/useMemo/useRef/自定义 Hook
  • React 渲染机制与性能优化（memo、shouldComponentUpdate）
  • 路由（React Router）、状态管理（Redux/Zustand）
  • 服务端渲染（Next.js 入门）
  • 实战项目：从零搭一个完整应用

经典案例：小白问「为什么我改了 state，页面没变？」老师：「看看你是不是把 state 当成普通对象在改——obj.name = 'x' 后 setState(obj)。React 靠『引用比较』判断要不要重新渲染，你原地改了对象，引用没变，React 以为没变。所以 React 的黄金法则：永远用不可变数据（immutability）。」 小白：「原来我一直在犯的『改了不更新』，不是 bug，是 React 的哲学。」

引发思考：

  1. 为什么 React 推崇不可变数据？它和虚拟 DOM 的 diff 有什么关系？
  2. 虚拟 DOM 是什么？它的 diff 算法核心思想（同级比较、key 优化）是什么？
  3. useMemo 和 useCallback 什么时候该用、什么时候是负担？
  4. React 的「状态放哪」决策树是什么？（组件内/Context/全局状态库/服务端）

5. React Hooks 核心原理与实战 / 现代 React Web 开发实战（选学，深化）

为什么学：Hooks 是 React 的现在和未来。这两门课深入 Hooks 的工作原理（Fiber、链表、闭包陷阱）并用 Hooks 重写现代应用，让你写出「优雅 + 正确」的 React 代码。

知识地图（Hooks 原理）：

  • Fiber 架构与 Hooks 的存储（链表）
  • useState/useEffect 的执行机制
  • 闭包陷阱与过期问题
  • 自定义 Hook 设计模式
  • Hooks 与并发特性（useTransition、Suspense）

经典案例：小白写的 useEffect 里用了一个定时器，结果每次渲染都重新创建、还泄漏。老师：「useEffect 的依赖数组是『和上一次渲染对比』的。你漏写了依赖，或依赖里放了对象字面量（每次渲染都变），effect 就会反复执行。Hooks 的每个坑，都藏在『闭包 + 依赖数组 + 渲染时机』这三者的关系里。」

引发思考：

  1. 为什么 Hooks 不能在条件语句里调用？(调用顺序与链表存储)
  2. 「闭包陷阱」是什么？setInterval 里的 state 为什么总是旧的？怎么解？
  3. 自定义 Hook 的本质是什么？你封装过哪些可复用的自定义 Hook？

四、Vue 系

6. Vue 开发实战 ★（必学，国内主流框架）

为什么学：Vue 是国内使用率最高、上手最平缓的框架。如果你在国内公司，Vue 是大概率要用的。这门课从语法到原理到实战，把 Vue 2 的核心讲透（Vue 3 见下一门）。

知识地图：

  • Vue 实例与模板语法
  • 指令系统（v-if/v-for/v-model/v-bind……）
  • 计算属性、侦听器
  • 组件化与通信（props/emit/event bus/Vuex）
  • 生命周期
  • 路由（Vue Router）
  • 虚拟 DOM 与响应式原理
  • 实战项目

经典案例：小白问「Vue 的数据响应式是怎么实现的？」老师：「Vue 2 用 Object.defineProperty 给每个属性加 getter/setter，读的时候收集依赖（谁在用它），改的时候通知它们更新。所以 Vue 2 有个经典坑：新增属性不响应（要用 Vue.set）。Vue 3 换成了 Proxy，整个对象都能代理，坑就没了。响应式，就是『数据一变，视图自动跟着变』的魔法引擎。」

引发思考：

  1. v-if 和 v-show 的区别？（渲染 vs 显隐，编译时机）
  2. 为什么 Vue 2 的数组部分方法（push 等）是响应式的，而直接 arr[0]=x 不是？
  3. Vuex 和 Pinia 的状态管理思想是什么？为什么需要它？
  4. 计算属性（computed）和侦听器（watch）什么场景用哪个？

7. Vue 3 企业级项目实战课（选学，现代 Vue）

为什么学：Vue 3 已是大势所趋（组合式 API + TypeScript + Vite）。这门课用一个真实企业级项目（后台管理系统）带你完整走一遍 Vue 3 工程化流程。

知识地图：

  • Vue 3 组合式 API（setup、ref、reactive）
  • Composition 封装与复用
  • TypeScript + Vue 3
  • Vite 构建、工程化规范
  • Pinia 状态管理
  • 权限系统（路由守卫 + 指令）
  • 组件库二次封装、国际化
  • 性能优化与部署

经典案例：小白从 Vue 2 迁 Vue 3，看到 ref 和 reactive 就晕。老师：「记住：ref 管基本类型和引用都行（用 .value），reactive 只管对象/数组（自动解包）。组合式 API 的核心思想是把『相关的逻辑』从 option 的框框里解放出来，按功能聚合——你不再需要 data/methods/computed 分区，而是按『用户模块、订单模块』来组织代码。」

引发思考：

  1. 组合式 API 相比选项式 API 解决了什么问题？（逻辑复用、可读性）
  2. 什么是 <script setup>？它比 setup() 函数好在哪？
  3. 权限系统中，「路由守卫 + 动态路由」是怎么实现不同角色看到不同页面的？

五、工程化

8. 玩转 webpack（选学，构建原理）

为什么学：webpack 是前端工程化的核心——模块打包、代码分割、资源优化、开发服务器。面试必问「webpack 原理」，实际开发要会配。学它，你理解「你写的源码是怎么变成线上产物的」。

知识地图：

  • 核心概念：entry、output、loader、plugin
  • Loader 与 Plugin 的区别（转换 vs 增强）
  • 模块解析与依赖图
  • 代码分割（Code Splitting）、Tree Shaking
  • 热更新（HMR）原理
  • 性能优化：缓存、多进程构建
  • 手写一个 Loader / Plugin

经典案例：小白问「为什么打包产物那么大、那么乱？」老师：「因为你没做代码分割和 Tree Shaking。webpack 默认把第三方库全打进一个 bundle，还带着没用到的代码。配置 splitChunks 把公共库拆出来、按路由懒加载，首屏体积能砍掉 70%。工程化不是玄学，是『让浏览器少干活』。」

引发思考：

  1. Loader 和 Plugin 的本质区别是什么？各自解决什么问题？
  2. Tree Shaking 为什么能删掉没用到的代码？它依赖什么机制？（ES Module 静态分析）
  3. HMR 热更新是怎么做到「不改状态地更新模块」的？（WebSocket + 模块替换）

六、多端开发

9. Electron 开发实战（选学，桌面应用）

为什么学：用 Web 技术写桌面应用（VS Code、Slack、Notion 都是 Electron 写的）。一个前端工程师会 Electron，就能做桌面端产品，能力半径大一圈。

知识地图：

  • Electron 架构：主进程 + 渲染进程
  • 进程间通信（IPC）
  • 原生能力（文件系统、菜单、托盘、窗口）
  • 打包与分发（electron-builder）
  • 安全实践（contextIsolation、sandbox）

经典案例：小白问「为什么 Electron 应用那么大？」老师：「它内置了一个完整的 Chromium + Node.js——写出来的应用自带整个浏览器。这是『体积换能力』的 trade-off：你用它换来了跨平台 + Web 技术栈。别嫌它大，先看它替你省了多少事。」

引发思考：

  1. 主进程和渲染进程为什么要分开？IPC 通信的两种方式是什么？
  2. Electron 的安全风险在哪？（渲染进程被 XSS 后能拿到主进程权限吗？）
  3. 和 Tauri（Rust + Web）对比，Electron 的优势和劣势是什么？

10. 微信小程序全栈开发实战 / 9 小时搞定小程序（选学，微信生态）

为什么学：小程序是中国互联网的「第四端」，微信生态的战略入口。两门课一门全栈、一门快速上手，学完你能独立开发上线一个小程序。

知识地图：

  • 小程序基础：WXML/WXSS/JS/JSON
  • 组件与 API（登录、支付、分享、地图）
  • 云开发（云函数、云数据库、云存储）
  • 小程序安全与审核
  • 全栈实战：完整小程序项目

经典案例：小白问「小程序和 H5 有什么区别？」老师：「小程序是『在微信里的原生应用』——有原生组件、原生能力（支付、扫码）、微信的流量入口，但开发模式更像传统前端。H5 是网页，能在任何浏览器打开但能力受限。微信生态里做生意，小程序是标配。」

引发思考：

  1. 小程序的渲染层和逻辑层为什么分开？（双线程模型）
  2. 「云开发」帮你省掉了什么？它适合什么规模的项目？
  3. 小程序审核有哪些红线？（虚拟支付、类目、敏感词）

11. React Native 新架构实战课（选学，跨端 App）

为什么学：用 React 写原生 App（iOS + Android 一套代码）。了解「跨端方案」的演进（RN、Flutter），是移动时代前端工程师���加分项。

知识地图：

  • RN 架构：JS 桥 / 新架构（TurboModules、Fabric）
  • 组件与 API、原生模块
  • 样式系统（Flexbox）
  • 性能优化与调试
  • 热更新与发布

经典案例：小白问「RN 和纯原生比，是不是永远差一点？」老师：「性能上，复杂场景确实有差距。但 RN 的价值是：一套 React 代码双端复用，团队效率翻倍，迭代快。大厂现在普遍是『核心页面原生 + 业务页面跨端』的混合架构——选型不是比谁强，是比谁合适。」

引发思考：

  1. 什么是「桥」？RN 新架构为什么用 JSI 取代桥？
  2. 跨端方案（RN/Flutter/原生）你按什么标准选型？

七、性能优化

12. 前端全链路性能优化实战 ★（必学，进阶必备）

为什么学：性能优化是高级前端的分水岭。这门课覆盖「网络 → 渲染 → JS → 资源 → 监控」全链路，从「能用的页面」到「极致的页面」。

知识地图：

  • 性能指标：FP、FCP、LCP、CLS、INP
  • 网络优化：HTTP/2、CDN、缓存、资源预加载
  • 资源优化：图片（WebP/压缩/懒加载）、字体、代码分割
  • 渲染优化：减少重排重绘、避免长任务、Suspense
  • JS 优化：防抖节流、虚拟列表、Web Worker
  • 性能监控：性能面板、埋点、Lighthouse、真实用户监控（RUM）

经典案例：小白用 Lighthouse 测自己的页面，LCP 3.5 秒（红）。老师带着逐项优化：「① 图片全量换 WebP + 加懒加载；② 首屏只留关键 CSS（critical CSS）；③ 路由级代码分割，首屏 JS 减少 60%；④ 用 preconnect 预热 CDN 域名。改完 LCP 从 3.5 秒降到 1.2 秒。」 小白：「性能优化不是玄学，是一套可量化的工程方法。」

引发思考：

  1. LCP（最大内容绘制）为什么是核心指标？它代表用户什么时候「看到内容」？
  2. 「首屏速度」和「交互流畅度」是一回事吗？优化目标分别是什么？
  3. 你能设计一个「前端性能监控」的最小方案吗？（采集什么、怎么上报、怎么告警）
  4. 移动端和桌面端，性能瓶颈有什么不同？优化优先级怎么排？

本阶段小结

学完阶段六，你已经是「懂原理、会框架、能优化」的前端工程师：

  • 懂浏览器：渲染流程、事件循环、性能瓶颈，写代码有「性能意识」；
  • 会框架：React 或 Vue 至少一门精通，能独立交付完整项目；
  • 懂工程化：webpack、代码分割、构建优化；
  • 能优化：从网络到渲染到 JS 的全链路优化方法论；
  • 能多端：小程序 / Electron / RN 至少掌握一项。

前端的天花板，从来不在于「会多少框架」，而在于「对浏览器和性能的理解有多深」。

下一站：07_阶段七_架构与分布式/。