前端沉淀
前端（React / Vue / TypeScript）的进阶主题沉淀区，共 28 篇。
与
flutter/区的关键区别：
flutter/区frontend/区（本区）性质 教程系列（体系化学习） 进阶主题（按需查阅） 序号含义 NN表示阅读顺序，建议按序读仅作编号，无强制顺序，挑着读 组织方式 项目 → 类别 → 文档（三级） 主题区 → 文档（扁平） 本区各篇相互独立，可以只看你需要的那一篇。
文档清单
🧩 语言与基础
| 序号 | 主题 | 解决什么问题 |
|---|---|---|
| 03 | TypeScript 进阶：类型体操与 Dart 对照 | "泛型/条件类型/infer 怎么用？类型体操该学到什么程度？" |
| 06 | CSS 布局体系 | "为什么 z-index 9999 还是被盖住？Flex 和 Grid 到底怎么选？" |
| 09 | JavaScript 运行时 | "事件循环怎么转？内存泄漏怎么查？ESM 为什么能 Tree Shaking？" |
| 18 | 手写题与代码设计 | "防抖节流/深拷贝/Promise/并发控制/LRU 怎么写才完整？" |
⚛️ 框架与组件
| 序号 | 主题 | 解决什么问题 |
|---|---|---|
| 05 | React 与 Vue 核心机制对比 | "响应式实现差异、重渲染粒度、模板 vs JSX、选型判断" |
| 07 | 状态管理演进与选型 | "该用 Redux 还是 Zustand？服务端状态放哪？Signals 是什么？" |
| 14 | 组件 API 设计与设计系统 | "受控还是非受控？样式方案怎么选？设计系统怎么分层？" |
| 15 | 路由与数据加载 | "history 刷新 404 怎么解？快速切换为什么显示旧数据？" |
| 19 | 前端设计模式 | "这些模式在 React/Vue 里长什么样？什么时候别用？" |
| 20 | 框架底层原理：Fiber 与响应式 | "为什么要有 Fiber？key 用 index 会怎样？Proxy 好在哪？" |
🌐 浏览器与性能
| 序号 | 主题 | 解决什么问题 |
|---|---|---|
| 04 | 浏览器与网络 | "渲染流水线、HTTP 缓存、CORS、性能怎么测" |
| 10 | Web 性能优化：治理手段 | "加载慢/操作卡/体积大/长列表，分别怎么治？" |
| 13 | 渲染模式：CSR/SSR/SSG/ISR/RSC | "要不要上 SSR？水合的代价是什么？" |
| 22 | Web 平台能力（浏览器新特性） | "WebAssembly/Worker/PWA/Service Worker 什么时候该用？" |
| 25 | 前端性能度量与诊断 | "LCP/INP/CLS 怎么读？长任务怎么定位？怎么防劣化？" |
🛠️ 工程化与质量
| 序号 | 主题 | 解决什么问题 |
|---|---|---|
| 02 | 前端工程化：Vite / Monorepo / 微前端 | "该不该上 Monorepo？微前端是不是过度设计？" |
| 08 | 前端安全 | "XSS/CSRF 怎么防？Token 该存哪？依赖投毒怎么防？" |
| 11 | 前端测试策略 | "测试金字塔怎么落地？用 MSW 还是手写 mock？" |
| 12 | 前端可观测性与线上排障 | "线上报错怎么知道？白屏怎么检测？Source Map 怎么传才安全？" |
| 16 | CI/CD 与部署运维 | "发了新版用户还是旧的？回滚怎么做才快？" |
| 21 | 构建工具原理：AST 与打包 | "Tree Shaking 为什么不生效？Vite 为什么快？" |
| 24 | 微前端架构落地 | "沙箱、样式隔离、依赖共享、通信怎么处理？" |
| 26 | 脚手架原理与实战：自研 CLI | "怎么从 0 写一个能发布的脚手架？" |
| 27 | 主流脚手架与工程化平台对比 | "Vite/create-vue/Nx 怎么选？什么时候别自研？" |
| 28 | 代码生成与规范化工具链 | "Plop/ESLint/husky/commitlint/changesets 怎么串起来？" |
🏗️ 架构与服务端
| 序号 | 主题 | 解决什么问题 |
|---|---|---|
| 01 | 跨端方案横向对比：RN / uni-app / Flutter / 小程序 | "为什么选 Flutter？其他方案差在哪？迁移成本多大？" |
| 17 | 前端架构分层与模块边界 | "目录怎么分？依赖方向怎么强制？循环依赖怎么破？" |
| 23 | Node.js 与 BFF | "Node 事件循环和浏览器有什么不同？BFF 该做什么、不该做什么？" |
面试复习怎么读
| 优先级 | 篇目 | 命中率 |
|---|---|---|
| 1 | 18 手写题 · 20 框架底层 · 09 JS 运行时 | 最高 |
| 2 | 08 前端安全 · 07 状态管理 · 10 性能优化 | 高 |
| 3 | 06 CSS 布局 · 13 渲染模式 · 21 构建原理 · 19 设计模式 | 中 |
| 4 | 其余各篇按岗位要求选读 | — |
能力分级（初中高资深）
面向读者是前端工程师，等级对应岗位职责（能交付什么），不是"看完几篇"就算数。 与 C 后端域（backend README）同一套四级标准，方便全栈对标。
| 等级 | 能力标准 | 对应文章 |
|---|---|---|
| 初级 | 能独立交付页面与功能：布局、路由、网络、基础选型 | A01 跨端对比 · A04 浏览器与网络 · A06 CSS 布局 · A15 路由与数据加载 |
| 中级 | 能独立交付完整前端应用：工程化、测试、性能、安全，面试硬八股（手写题/TS/状态管理/设计模式） | A02 工程化 · A03 TypeScript · A05 框架对比 · A07 状态管理 · A08 前端安全 · A10 性能优化 · A11 测试策略 · A16 CI/CD · A18 手写题 · A19 设计模式 · A27 脚手架对比 |
| 高级 | 懂原理能诊断：运行时与框架底层、性能度量与排障、复杂交互与架构设计 | A09 JS 运行时 · A12 可观测性 · A13 渲染模式 · A14 组件与设计系统 · A17 架构分层 · A20 框架底层 · A21 构建原理 · A22 Web 平台能力 · A23 Node 与 BFF · A25 性能度量与诊断 |
| 资深 | 能在架构、工程化平台、跨团队治理层面做取舍与交付 | A24 微前端落地 · A26 脚手架自研 · A28 代码生成与规范链 |
这条线不强制串行：做个人全栈项目时，你常常同时需要初级（写页面）+ 高级（调性能）的能力，按当前岗位要求并行推进即可。
本域计划见 plan/frontend.md；写作规范见 GUIDE.md。
本区的写作原则
1. 以"判断框架"为核心，不做重复教程
前端基础教程网上已经足够多。本区只写网上少见、但对你有独特价值的内容：
- 选型判断框架——不只是"是什么"，而是"什么时候选它、为什么不选别的"
- 底层原理与排查思路——能解释现象，而不是靠试
- 迁移 / 演进的实战经验——踩过的坑、真实的成本
2. 易变信息隔离
版本号、性能跑分、生态排名这类会过时的信息：
- 不写死在正文，或明确标注"请以官方为准"
- 优先写稳定的判断维度（架构模型、心智负担、适用边界）
3. 篇末互链
每篇的「相关文档」都会与本区其他篇、以及 flutter/ / AI/ 区对应章节互链，形成知识网络而非孤岛。
新增一篇文档后
- 在
frontend/下建NN-标题.md（文件名禁空格） - 在上方文档清单表格里补一行
- 在
.vitepress/config.ts的nav/sidebar里注册（绝对路径） - 在
docs/plan/frontend.md把对应行置 ✅ npm run docs:build验证构建- 提交源码；部署需人工验证后单独执行
npm run deploy
本区由 VitePress 构建，源码存于 Gitee（
dev开发 /master稳定），产物部署在 Cloudflare Pages。