🗺️ 前端技术演化史 · 总索引 (Map of Content)
这是什么
这不是一份技术清单,而是一部前端技术文明演化史。 核心问题不是”有哪些技术”,而是:
- 一项技术为什么会出现?(它解决了上一代的什么痛点)
- 它为什么会流行?(它踩中了哪个时代红利)
- 它为什么会衰落?(它的副作用如何反噬自己)
- 下一代为什么能替代它?(因果链如何延续)
阅读路径建议
- 想看大局 → 先读 时间线总览 和 关系图谱-技术因果链
- 想顺着历史读 → 从 1995-2005 浏览器时代 一路读到 2023-未来 AI时代
- 想钻研某项技术 → 跳到「技术专题」对应条目
- 想看争议性结论 → 直接看「深度专题」(React vs Angular、Vite 取代 Webpack 等)
📖 一、时代叙事(主线,按时间读)
| 时代 | 年份 | 一句话定性 | 核心矛盾 |
|---|---|---|---|
| 1995-2005 浏览器时代 | 1995–2005 | 文档时代 → 浏览器战争 | 标准缺失 vs 厂商割据 |
| 2005-2013 Ajax时代 | 2005–2013 | 网页变成”应用” | 异步交互 vs DOM 操作的混乱 |
| 2013-2018 SPA时代 | 2013–2018 | 前端独立成”工程” | 复杂状态 vs 命令式 DOM |
| 2018-2023 工程化时代 | 2018–2023 | 工具链成为主战场 | 开发体验 vs 构建复杂度 |
| 2023-未来 AI时代 | 2023–至今 | 人不再是唯一的写码者 | 抽象的天花板 vs AI 的生产力 |
🧩 二、技术专题(支线,按主题查)
🌐 浏览器
📜 JavaScript 语言
- ECMAScript演进史(总览)
- ES3 · ES5 · ES6-ES2015 · ES-Modules
⚛️ 框架
🔧 工程化
- 前端工程化演进史(总览)
- Grunt-Gulp-任务流时代 · Browserify · Webpack · Rollup · Babel · TypeScript · npm-Yarn-pnpm-包管理 · Vite · Turbopack
⚙️ 运行时
🎨 CSS 与样式
- CSS演进史(总览)
- 布局演进史(table→float→Flexbox→Grid→Container Queries) · CSS方法论(OOCSS/BEM/SMACSS) · CSS预处理器(Sass/Less/PostCSS) · CSS-in-JS(styled-components/Emotion/零运行时) · 原子化CSS(Tailwind/UnoCSS)
🧱 UI 组件与设计系统
- UI组件库演进史(总览)
- Bootstrap · 组件库时代-AntD-MUI-Element · Headless-UI(Radix/Headless UI) · shadcn-ui(复制代码而非依赖)
🖼️ 渲染模式
- 渲染模式演进史(总览:MPA→SPA→SSR→SSG→ISR→RSC)
🚀 部署与托管
- 部署与托管演进史(总览:算力一路向用户靠近)
- CDN与静态托管 · Jamstack · Serverless与FaaS · Edge边缘运行时
🌍 Web 平台能力
- Web平台能力演进史(总览:平台原生能力反哺框架)
- Web-Components · PWA · WebAssembly · Service-Worker与离线能力
📱 跨端与全栈
- 跨端与全栈演进史(总览:前端的领土扩张史)
- React-Native与移动跨端 · 小程序生态 · Electron与桌面端 · 全栈框架与BFF · RSC与前后端边界模糊
🧪 测试体系
- 前端测试演进史(总览:从金字塔到测试奖杯)
- Jest与单元测试 · Vitest · Testing-Library与组件测试 · E2E测试-Cypress与Playwright
📦 包生态与 Monorepo
- 包生态与Monorepo演进史(总览)
- npm-registry与包生态 · Monorepo与workspaces · Lerna与Turborepo · Nx
- (包管理器本身见 npm-Yarn-pnpm-包管理)
🗃️ 状态管理
- 状态管理演进史(总览)
- Redux · MobX · Vuex-Pinia · Zustand
🤖 AI 时代
- AI编程演进史(总览)
- GitHub-Copilot · Cursor · Claude-Code · Agent与MCP · AI-Native-Development
🔬 三、深度专题(争议与本质)
这些是历史中最值得反复咀嚼的”为什么”,每篇都是一个独立论证。
- 为什么React战胜了AngularJS
- 为什么Vue在中国崛起
- 为什么Webpack统治了十年
- 为什么Vite能取代Webpack
- 为什么pnpm解决了依赖问题
- AI编程会让前端框架收敛吗
- 未来5到10年前端发展方向
- 为什么WebComponents理念先进却没赢
- Edge会取代传统SSR吗
📊 四、图谱与时间线
- 关系图谱-技术因果链 — 总因果图(Mermaid),展示技术如何”生出”下一项技术
- 图谱-主题分线图 — 把总图拆成 5 条专线:抽象上移 / 模块化 / 渲染螺旋 / 工具链提速 / 状态钟摆
- 图谱-竞争与替代关系 — 谁取代了谁、谁和谁竞争(催生 / 取代 / 共存 三种关系)
- 图谱-框架血缘谱系 — 框架的”思想血缘”:谁受谁启发,以及 signals 收敛趋势
- 时间线总览 — Mermaid timeline,1995 至今的关键事件
- 演进逻辑-五个永恒矛盾 — 贯穿三十年的底层张力
每篇时代叙事末尾也各有一张「本时代内部因果图」,聚焦该时代 8–10 年的演化。
🧠 五、贯穿全史的元规律
如果只记住五句话
- 抽象总是向上爬:从手写 DOM → 命令式库 → 声明式框架 → 编译器 → AI。每一层都是为了让人少关心下一层。
- 副作用催生下一代:jQuery 的全局污染催生模块化,SPA 的白屏催生 SSR,Webpack 的慢催生 Vite。没有一项技术不是在解决前一项的副作用。
- 开发体验(DX)是终极驱动力:用户体验决定生死,但开发者体验决定流行。
- 标准化是潮汐:厂商先野蛮生长(浏览器战争、打包器混战),标准滞后追认(ESM、Web Components),然后新一轮分叉。
- 谁掌握了入口,谁定义时代:浏览器之于 90 年代,框架之于 SPA 时代,工具链之于工程化时代,模型与 Agent 之于 AI 时代。
🔗 相关:演进逻辑-五个永恒矛盾 | 知识库使用说明