前端技术

收录前端领域的技术笔记，覆盖框架、工程化、样式、性能与浏览器原理，随学习持续补充。

已收录

• Vue 3 — 官方指南镜像：模板语法、响应式系统、组件机制（开始；子主题：Vue 3 API 参考、生态与工具链）
• React — 渲染心智模型、Hooks 与并发特性、Actions 与状态管理选型（基于 React 19）
• Angular — 组件与模板、依赖注入、信号与变更检测、RxJS 响应式编程（基于 Angular 22）
• Svelte — 编译时框架、runes 显式响应式、SvelteKit 全栈
• Astro — 内容优先的岛屿架构、内容层、静态站点生成
• TypeScript 在工程中的实践 — 严格配置基线、业务类型建模、泛型进阶与类型体操、工程化落地
• 构建工具 — Vite / Rollup 与 Webpack 原理、代码分割与缓存
• 微前端与架构 — 集成方案谱系、Module Federation、沙箱隔离、Monorepo 组织
• 样式方案 — 现代 CSS 特性、CSS Modules、Tailwind / UnoCSS 原子化、设计令牌
• 性能优化 — Core Web Vitals、渲染性能、加载与体积、测量监控
• 测试 — 测试策略金字塔、Vitest、组件测试、Playwright E2E 与 mock 边界
• 浏览器原理 — 进程架构与渲染管线、事件循环、存储与安全
• 前端安全 — XSS 编码防线、CSRF 与登录态、CSP/SRI/Trusted Types、供应链安全

规划清单

主题	说明	状态
Vue 3	官网 Guide（32 页）+ API（28 页）完整镜像已收录；生态与工具链子主题已收录 Vue Router 8 页、Pinia 8 页、Vite 6 页、Vitest 4 页与 VueUse 2 页（共 28 页）	部分收录
React	Hooks 心智模型、并发特性、状态管理选型	✅ 已收录（react.md：渲染心智模型与协调、Hooks 正确用法与性能、useTransition/useDeferredValue/Suspense、Actions（form action/useActionState/useOptimistic）、状态管理演进阶梯与 Zustand v5/RTK 写法、React 19 特性速览、9 条踩坑；基于 React 19）
Angular	模块化架构、依赖注入、RxJS 响应式编程	✅ 已收录（angular.md：standalone + 信号 + Zoneless 新范式、注入器树与四种 provider 写法、RxJS 异步编排、路由/表单/工程化、9 条踩坑；信号与 RxJS 示例本机实测）
Svelte	编译时框架、细粒度响应、SvelteKit 全栈	✅ 已收录（svelte.md：编译时框架与无虚拟 DOM 更新策略、runes（$state/$derived/$effect/$props）与 legacy 迁移双模式、块语法与 snippets、SvelteKit 2 路由 load/表单 actions/SSG、8 条踩坑；基于 Svelte 5 + SvelteKit 2）
Astro	内容优先的岛屿架构、静态站点生成	✅ 已收录（astro.md：MPA 与默认零 JS、岛屿架构与 client 指令矩阵、多框架集成、Content Layer 集合与 astro:env、SSG/SSR/Server Islands、图片与视图过渡、8 条踩坑；基于 Astro 5）
TypeScript 在工程中的实践	类型体操、泛型进阶、工程化约束	✅ 已收录（typescript.md：strict 基线 tsconfig、判别联合/satisfies/branded type、infer 与映射/递归类型、Schema 生成与 zod 运行时校验、ESLint+CI 落地、声明发布、8 条踩坑；示例按 TS 5.5+ 标注版本）
构建工具	Vite 插件机制、Webpack 原理、代码分割与缓存	✅ 已收录（build-tools.md：工具谱系、Vite dev/预构建/HMR/插件、Webpack loader+plugin+chunk 缓存、代码分割与资源提示、构建提速方案、6 条踩坑）
微前端与架构	模块联邦、Monorepo 组织	✅ 已收录（microfrontend.md：动机与代价、四种集成方案谱系、Module Federation host/remote/shared 与懒加载降级、qiankun JS/样式/路由隔离、契约化通信、Monorepo（pnpm+Turborepo）与独立发布、8 条踩坑）
样式方案	Tailwind / UnoCSS、CSS Modules、设计令牌	✅ 已收录（styling.md：现代 CSS 特性矩阵（嵌套/@layer/容器查询/:has/color-mix）、CSS Modules 与 scoped 作用域、Tailwind v4 CSS-first 与 UnoCSS 按需生成、三层令牌与明暗主题、可落地组合方案、8 条踩坑）
性能优化	渲染性能、打包体积、首屏指标（LCP/INP）	✅ 已收录（performance.md：Core Web Vitals 阈值、关键路径、帧预算与长任务、布局抖动、资源/图片/字体优化、实验室与 RUM 监控、7 条踩坑）
浏览器原理	渲染管线、事件循环、存储与安全	✅ 已收录（browser.md：多进程架构、导航与渲染管线、图层与合成、事件循环与微任务时序、六种存储对比、XSS/CSRF/CSP/SRI 防线、7 条踩坑）
测试	单元/组件/E2E 测试策略	✅ 已收录（testing.md：测试金字塔与分层策略、Vitest 3 单测与覆盖率、Testing Library/VTU 组件行为测试、Playwright web-first 断言与 trace、MSW 与 mock 边界、CI 门禁、8 条踩坑）
前端安全	XSS、CSRF 与依赖供应链安全	✅ 已收录（security.md：威胁模型、XSS 三类时机与编码上下文、DOMPurify 白名单、CSP/Report-Only、CSRF 与 SameSite、供应链防线（lockfile/audit/SBOM）、密钥与水合数据红线、现代安全 API（SRI/Trusted Types）、9 条踩坑）

写作规范

• 每篇聚焦一个技术点，包含「核心概念 → 代码示例 → 常见坑 → 参考链接」；
• 代码示例必须可运行，注明适用版本；
• 文件名用短横线命名（如 vue-reactivity.md），新增后登记到 config.mjs 侧边栏。