前端知识矩阵

面向实战、可视化、适合新手上手的前端知识体系。每个主题都尽量配有交互式 Demo 与一页讲清核心原理。

提示：点击下方条目可直接跳转到详细页面；带有“演示”的条目包含可交互的可视化示例。

快速能力入口

• 学习路径与里程碑
• 发布自回归检查手册
• 前端性能预算与监控清单（演示）

JavaScript 机制

• Event Loop 事件循环详解（演示）
• React Diff 算法详解（演示）
• KMP 算法详解（演示）
• Virtual DOM 与 Fiber 入门（演示）
• 防抖与节流（演示）
• var / let / const 区别详解
• Promise 链路与错误处理（演示）
• TypeScript 类型推断实战（演示）

浏览器与渲染

• 浏览器渲染流水线与重排重绘（演示）
• CORS
• HTTP 请求生命周期详解（演示）
• 浏览器缓存策略实战（演示）

CSS 机制

• CSS 堆叠上下文（Stacking Context）详解（演示）

工程实践与性能

• 高性能表单如何实现
• 深拷贝与浅拷贝实战（演示）
• 前端性能预算与监控清单（演示）

14 天学习建议

1. 第 1 周先完成 JavaScript 机制与浏览器链路（Event Loop、Promise、HTTP、缓存）。
2. 第 2 周补齐工程实践与性能治理（高性能表单、性能预算、自回归手册）。
3. 每完成一个主题，至少执行一次“阅读 + 演示 + 输出笔记”闭环。

发布前最小回归步骤

1. 功能回归：主路径点击、演示页可访问、移动端布局检查。
2. 性能回归：首屏体积与关键指标对比上一版本。
3. 质量门禁：执行 lint、typecheck、test、build 后再发布。

---

欢迎补充你关心的知识点与案例，我会持续完善矩阵覆盖与可视化体验。