LEARNING PATH · 01
前端开发
从浏览器运行机制出发，连接语言、框架、工程化与用户体验。
学习目标
理解浏览器、语言、框架与工程化之间的完整链路，能够用指标和边界解释前端问题。
SYSTEM
核心知识体系
先建立模块内的概念顺序，再通过关联主题连接到完整工程链路。
01浏览器与网络
02JavaScript / TypeScript
03组件与状态
04构建与质量
05性能与安全
READING ORDER
推荐学习顺序
首篇重点文章可以直接阅读；规划中内容展示摘要与完整大纲，不以薄内容页面冒充已发布文章。
01
已发布中级
18 分钟从输入 URL 到页面可交互：浏览器渲染全链路
把一次页面访问拆成网络、解析、样式计算、布局、绘制与交互阶段，建立定位前端性能问题的共同语言。
前置：了解 HTML、CSS 与 JavaScript 基础
查看内容大纲
- 问题背景：页面为什么不是一次画出来的
- 导航与网络请求
- 解析与渲染树
- 布局、绘制与合成
- 可交互不等于视觉完成
- 实践：减少关键渲染路径
- 常见误区与总结
02
规划中中级
16 分钟JavaScript 执行模型：调用栈、任务队列与事件循环
解释同步任务、微任务和宏任务的调度顺序，以及长任务为何会阻塞输入与渲染。
前置：掌握 JavaScript 函数与 Promise
查看内容大纲
- 执行上下文与调用栈
- 任务与微任务
- 浏览器渲染时机
- Node.js 的差异
- 调试顺序问题
03
规划中中级
20 分钟TypeScript 类型系统：从结构化类型到类型收窄
从结构化类型出发，说明联合类型、泛型、类型守卫和类型边界如何协同。
前置：具备 JavaScript 基础
查看内容大纲
- 结构化类型
- 联合类型与收窄
- 泛型约束
- 边界数据校验
- 常见类型体操误区
04
规划中中级
18 分钟React 状态与渲染：组件更新的边界和成本
梳理状态、派生数据、组件身份、渲染与记忆化，避免无效状态和过度优化。
前置：了解 React 组件与 Hook
查看内容大纲
- 状态与派生数据
- 组件身份
- 更新传播
- 记忆化成本
- 组件边界实践
05
规划中入门
15 分钟前端工程化基线：构建、检查与发布流程
建立类型检查、代码规范、测试、构建产物和发布验证的最小工程闭环。
前置：能运行一个前端项目
查看内容大纲
- 工程化解决什么
- 本地检查
- 构建产物
- 持续集成
- 发布基线
06
规划中高级
22 分钟Web 性能优化：用指标定位真实瓶颈
围绕 Core Web Vitals、资源瀑布图和主线程任务建立从测量到验证的优化方法。
前置：理解浏览器渲染过程
查看内容大纲
- 用户体验指标
- 实验室与真实用户数据
- 网络瓶颈
- 主线程瓶颈
- 回归验证
CONNECTIONS
模块关联
PUBLISHED