前端技术演化史 · 总索引
前端技术演化史 · 总索引 (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 语言
框架
工程化
- [前端工程化演进史]
- Grunt-Gulp-任务流时代 · Browserify · Webpack · Rollup · Babel · TypeScript · npm-Yarn-pnpm-包管理 · Vite · Turbopack
运行时
- [JS运行时演进史]
- Node.js · Deno · Bun
CSS 与样式
- [CSS演进史]
- 布局演进史(table→float→Flexbox→Grid→Container Queries) · [CSS方法论] · [CSS预处理器] · [CSS-in-JS] · [原子化CSS]
UI 组件与设计系统
- [UI组件库演进史]
- Bootstrap · 组件库时代-AntD-MUI-Element · Headless-UI(Radix/Headless UI) · [shadcn-ui]
渲染模式
部署与托管
Web 平台能力
跨端与全栈
测试体系
包生态与 Monorepo
- [包生态与Monorepo演进史]
- npm-registry与包生态 · Monorepo与workspaces · Lerna与Turborepo · Nx
- (包管理器本身见 npm-Yarn-pnpm-包管理)
状态管理
- [状态管理演进史]
- Redux · MobX · Vuex-Pinia · Zustand
AI 时代
三、深度专题(争议与本质)
这些是历史中最值得反复咀嚼的”为什么”,每篇都是一个独立论证。
- 为什么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 时代。
相关:演进逻辑-五个永恒矛盾 | 知识库使用说明