前端技术与架构演进

最后更新：2026-08-19

前端是互联网世界里"演进速度最快、名词最多"的技术领域之一。从 1991 年第一个网页到今天，前端经历了从静态页面 → 服务端渲染 → 前后端分离 → 工程化体系 → 全栈化/同构化的五次范式跃迁。每一次跃迁背后都是同一个矛盾在推动："内容/交互越来越复杂" vs "浏览器、网络、硬件的能力上限"。

本主题以一条时间主线，把每个时代的代表性技术/架构单独成文，最后专门论述 VitePress——本站在用的静态站点生成器，也是"前端如何自我进化"的一个缩影。

演进主线全景

文档清单（按阅读顺序）

文档	一句话	覆盖时代
演进总纲	一条主线 + 四个驱动力，先看这张地图再进细节	全部
静态网页时代	表格布局、原生 JS、页面刷新式交互——一切的起点	时代一
服务端渲染时代	CGI → PHP/JSP/ASP → 模板引擎：把"拼页面"搬上服务器	时代二
AJAX 与前后端分离	XMLHttpRequest 让页面"无刷新"更新，SPA 由此诞生	时代三
MVC / MVVM 架构模式	从 Backbone 到 Vue/React：数据驱动取代命令式 DOM 操作	时代四
前端框架全景	从 jQuery 到 React/Vue 生态：四代框架族谱逐个论述 + 选型决策	时代二~四
虚拟 DOM 与响应式	框架如何在"不写 DOM 操作"的前提下保持高性能	时代四
构建工具演进	Grunt → Gulp → Webpack → Vite：模块化需求的层层加码	时代四
SSR / SSG 与元框架	把"前端框架"再渲染回服务端，拿回 SEO 与首屏	时代五
微前端架构	巨石应用的拆分方案：iframe → single-spa → qiankun → 模块联邦	时代五
VitePress 专篇	本站正在使用的文档站点方案：VuePress 之后、基于 Vite 的 SSG	时代五

一句话总结

前端演进史就是一部"复杂度转移史"：渲染复杂度从浏览器转移到服务器（SSR），再转移到框架运行时（SPA/虚拟DOM），最后分散到工程体系（构建、同构、微前端）——每个时代都在解决上一个时代遗留的矛盾，同时制造下一个时代要解决的问题。