Appearance
前端演进总纲：一条主线，四个驱动力
最后更新：2026-08-19
本主题要回答的问题
- 前端 30 年演进有没有一条贯穿始终的主线？还是纯属"追新"？
- 每次"范式跃迁"（从静态到 SSR、从 SSR 到 SPA……）的触发点是什么？
- 为什么有些技术被淘汰、有些技术"换了个壳"又回来了（如 SSR 的回归）？
一、演进主线：渲染位置与交互粒度的摆动
把 30 年放在一条轴上看，前端历史其实就是"渲染发生在哪里"与"交互要不要刷新整页"两个变量的摆动：
| 时代 | 时间 | 页面渲染位置 | 交互方式 | 代表性技术 |
|---|---|---|---|---|
| 一：静态网页 | 1991~1998 | 浏览器（纯静态） | 点链接 → 整页跳转 | HTML、表格布局、原生 JS |
| 二：服务端渲染 | 1995~2008 | 服务器（动态生成） | 提交表单 → 整页刷新 | CGI、PHP/JSP/ASP、模板引擎 |
| 三：前后端分离 | 2005~2015 | 浏览器（JS 拉数据再渲染） | 局部更新，不刷新整页 | AJAX、SPA、Backbone/AngularJS |
| 四：工程化体系 | 2013~至今 | 浏览器（框架运行时） | 组件化 + 数据驱动 | React/Vue、Webpack/Vite、MVVM |
| 五：全栈与同构 | 2016~至今 | 服务端 + 浏览器（同构） | 首屏服务端渲染 + 客户端水合 | Next.js/Nuxt、SSG、微前端 |
关键洞察：渲染重心不是单向移动的。时代二把渲染搬到服务器，时代三又搬回浏览器，时代五"两头都要"——这不是倒退，而是每一次都是"在更复杂的约束下重做上一轮的事"。
二、四个驱动力
| 驱动力 | 表现 | 引发的演进 |
|---|---|---|
| 内容规模 | 从个人主页 → 门户 → UGC → 巨型应用 | 静态 HTML 手写不可行 → 模板/数据驱动 |
| 交互实时性 | 表单提交 → 局部刷新 → 即时协作 | 整页刷新不可接受 → AJAX → WebSocket |
| 团队规模 | 单兵 → 数十上百人协作 | 没有工程化/组件化就会失控 → 框架 + 构建链 |
| 设备与网络 | 桌面 → 移动端 → 弱网 | 性能预算收紧 → SSR/SSG/水合优化 |
这四个驱动力共同解释了"为什么前端总是显得在折腾"：约束变量太多，任何单一方案都无法长期通吃。
三、被淘汰 vs 换壳回归
| 技术 | 命运 | 真相 |
|---|---|---|
| Table 布局 / 浮动布局 | 被淘汰 | 被 Flexbox/Grid 取代，能力不足而非理念错误 |
| jQuery 的 DOM 操作 | 大部分被淘汰 | "命令式 DOM"被"声明式数据驱动"取代 |
| PHP 的整页服务端渲染 | 表面被冷落 | 以 SSR/SSG 形式回归，理念没死 |
| 单页应用（SPA） | 仍在，但被修正 | 不再"一刀切"，按场景选 SPA/SSR/SSG |
| Flash / Silverlight | 彻底淘汰 | 被 HTML5 原生能力取代（标准的力量） |
四、五篇正文的阅读路线
- 从 静态网页时代 出发，理解"起点"的能力边界；
- 经 服务端渲染时代，看动态化如何解决；
- 到 AJAX 与前后端分离，看交互革命；
- 之后是工程化四件套：MVC/MVVM、虚拟 DOM、构建工具；
- 最后是现代方案：SSR/SSG 与元框架、微前端、VitePress。
一句话总结
前端演进不是"新词替换旧词"，而是渲染位置与交互粒度在两个维度上的摆动：内容复杂了就往服务器搬（SSR/SSG），交互实时了就往浏览器搬（SPA），两者都要就做同构——看懂这条摆动曲线，就掌握了所有前端名词的归类方法。