序言
前端领域在过去十年经历了寒武纪大爆发般的演进。从最初的 jQuery 刀耕火种，到如今 React/Vue 鼎立、工程化工具百花齐放（Webpack、Vite、Turbopack），再到 Node.js 赋能全栈、AI 辅助编程的崛起，技术的迭代速度令人叹为观止。
之前很多知识都是在业务开发中“按需索取”、零散积累的。随着业务复杂度的提升以及准备高级前端面试的需要，单纯的“API 熟练工”已经无法满足架构设计和复杂性能优化的要求。因此，有必要褪去浮躁，回归底层，系统性地重塑前端知识体系。
本知识库不仅记录了常用的基础语法，更侧重于底层原理（如 V8 垃圾回收、React Fiber 架构）、工程化闭环、性能优化实战以及经典设计模式的业务应用。
⏳ 前端生态演进时间线
了解一个技术的诞生背景，有助于我们更好地理解它解决的痛点。以下是前端核心生态里程碑（按大致诞生/流行时间整理）：
| 年份 | 运行时 / 语言标准 | 框架 / 库 | 构建工具 / 工程化 |
|---|---|---|---|
| 2009 | Node.js (CommonJS), ES5 | - | - |
| 2010 | - | Backbone.js | npm |
| 2011 | - | - | Browserify |
| 2012 | TypeScript | - | Grunt |
| 2013 | - | React | Gulp |
| 2014 | HTML5 标准确立 | Vue | Webpack, Babel |
| 2015 | ES6 (ES2015) 发布 | Redux, GraphQL | ESLint |
| 2016 | - | Angular (2.0) | - |
| 2018 | Node.js (ESM 实验性支持) | Hooks (React 16.8) | Parcel |
| 2019 | - | - | Rollup (普及), SWC |
| 2020 | WebAssembly 普及 | Vue 3.0 | Vite, esbuild, Snowpack |
| 2022 | Edge Runtime 兴起 | React 18 | Turbopack, Rspack |
| 2024+ | AI 辅助编程 (Copilot/Cursor) | Server Components | 极速构建链（Rust化） |
🌳 核心知识树
本知识库围绕以下几个核心模块展开深度剖析：
- JavaScript 核心原理：词法环境与闭包陷阱、原型链与 Class、Event Loop、异步编程（Promise / Generator / await），以及从 ES2015 到 ES2025 的核心特性演进。
- TypeScript 进阶：类型系统工具泛型、装饰器、配置工程化，以及在大型项目中的类型设计实践。
- React 深度解析：Fiber 架构下单链表结构、时间切片、优先级调度，Hooks 底层链表机制与 Context 穿透优化。
- Vue 深度解析：基于 Proxy 的响应式原理与依赖收集、Diff 算法、模板编译流程与内置组件设计。
- 浏览器与网络：HTTP/1.1 至 HTTP/3 演进、TCP 三次握手与拥塞控制、WebSocket 全双工通信、浏览器缓存策略、跨域与本地存储机制。
- 前端安全：XSS 与 CSRF 攻防、SameSite Cookie、点击劫持、CSP 与 HTTPS 安全策略。
- CSS 架构与性能：动画与合成层、层叠上下文与包含块、移动端适配方案、PostCSS / Tailwind 工程化体系。
- 构建工具与工程化：Webpack 插件与 Loader 体系、Vite 极速冷启动原理、Rollup 库打包、Babel 编译流程与 AST。
- Canvas 与 2D 图形：离屏渲染、脏矩形与重绘策略、fabric.js / Konva 引擎对比、图形拾取与事件系统。
- Three.js 与 WebGL：坐标变换与矩阵、Shader 编写与光照材质、模型加载与性能优化、WebGL 渲染管线及 WebGPU 演进。
- Node.js 与底层：V8 引擎内存管理与垃圾回收（Orinoco）、libuv 异步 I/O 架构、多进程模型与 Stream 应用、NestJS / Koa 中间件。
- 全栈开发：Docker / Kubernetes 容器编排、Nginx 反向代理与负载均衡、CI/CD 自动化、API 设计与鉴权安全、数据库（MySQL/Redis/MongoDB）与高并发组件。
- 跨端与桌面：PWA Service Worker 生命周期与缓存策略、React-Native 桥接原理、Electron 进程模型与 IPC 通信安全。
- 数据结构与算法：链表 / 栈队列 / 树 / 动态规划 / 双指针 / 贪心等高频面试题型系统梳理。
- 性能优化闭环：Core Web Vitals 指标体系、长任务（Long Tasks）拆分、首屏与运行时优化 PDCA 闭环。
- 设计模式实战：单例、策略、发布订阅等经典设计模式在真实前端业务场景中的落地。
📚 参考资源
站在巨人的肩膀上，以下是构建本知识库的重要参考资料：