前端进阶系列

面向：已有 Vue / React / 工程化实战（如 Journal、外包），想补齐面试可讲、项目能用的前端难点与亮点。
定位：与 react进阶/ 互补——那边是 React / Next 官方路线入门到小项目；本目录写 工程化与可视化等进阶专题。
原则：一事一文、有 demo 再开文；先读官方 / 权威文档，再写「问题 → 取舍 → 默认做法」。
对齐暑假计划：个人暑假计划 · 前端线（专题深潜，不抢算法主线）。

本目录写什么

1. 难点：Monorepo、微前端、构建与包边界、鉴权、安全等。
2. 亮点：Three.js、Canvas、动效等可演示项。
3. 对照笔记：每篇含验收清单；收束见 24 · 专题复盘合集。

不写：基础语法、组件入门、Journal 产品方案（→ docs/spec/）。

怎么读

节奏	建议
平日 20～40′	读 1 篇 + 敲文内 checklist
周末深潜 2～3h	冲完一个专题验收（尤其 01 / 03 / 05）
卡壳时	官方链接优先；AI 只做加速

推荐起步顺序：01 → 04 → 05 → 02 或 03，再按需插读；全部复盘用 24。

---

文章索引

阶段 1 · 优先专题

#	文档	你学完应能做什么
01	Monorepo：为什么拆、怎么拆、怎么管	说清 monorepo vs polyrepo；搭 apps+packages；对照 Journal
02	微前端：场景、方案与代价	何时不上微前端；方案对照表；隔离代价
03	Three.js：从零到可演示小场景	场景/相机/渲染器；可交互小场景 + 踩坑
04	前端工程化：Vite、分包、Tree-shaking	看 bundle；动态拆包；记下砍掉了什么
05	性能优化：渲染路径、长列表、虚拟滚动	重排直觉；列表策略；前后指标对比
06	TypeScript 进阶（实用向）	收窄 any；泛型与 API/store 类型
07	状态与数据层边界	UI 状态 vs 服务端状态；解耦一层图
08	浏览器底层：事件循环与渲染流水线	宏/微任务与 rAF；口述执行顺序
09	网络与缓存：HTTP、鉴权刷新、上传	缓存直觉；并发 401 只刷新一次
10	前端安全常见坑	XSS/CSRF 等；项目检查清单

阶段 2 · 体验与可视化

#	文档	侧重点
11	Canvas 与 2D 可视化入门	自绘 vs 图表库；DPR
12	WebGL 与 Shader 进阶	材质/后处理；少裸 WebGL
13	Web Workers 与 OffscreenCanvas	重计算离主线程
14	动画体系：CSS / WAAPI 与库的取舍	能 CSS 就 CSS
15	设计系统与组件库工程	Token → 组件 → 文档
16	无障碍 a11y 与语义化	焦点、键盘、ARIA
17	国际化 i18n	文案 key 化；Intl
18	PWA 与 Service Worker	缓存策略与更新提示

阶段 3 · 工程闭环与跨端

#	文档	侧重点
19	测试策略：单元 / 组件 / E2E	测什么、Mock 边界
20	监控与可观测性	错误、性能、RequestId
21	CI/CD 与前端质量门禁	PR 门禁与 monorepo filter
22	跨端进阶：小程序与 uni-app 对照	双端差异、分包、条件编译
23	SSR / 同构与水合（决策向）	要不要 SSR；水合坑
24	专题复盘合集	问题→取舍→默认做法；系列收束

---

与 blog 其他文档的关系

文档 / 目录	职责
本目录	前端难点 / 亮点专题（24 篇）
react进阶/	React / Next App Router 官方优先教程
go/ / 算法/	另两线；勿同一天硬啃两套大里程碑
个人暑假计划	时间配额
blog 后续规划	全 blog 队列

个人暑假计划 · 前端线
        │
        ├── react进阶/     （框架主线：Next 小项目）
        └── 前端进阶/      （专题线：01 → … → 24 复盘）

读完之后

1. 打开 24 · 复盘 填阶段 1 卡片。
2. 选 1 个亮点（Three / 性能对比）做成可演示证据。
3. 框架手感不够 → 转 react进阶。