前端技术演化史 · 共 106 篇
从浏览器之争到 AI 时代，梳理每一次框架更替、工具兴替背后的因果——为什么是它，为什么在那时候。
或者，浏览全部
Web 从"会动的文档"开始,在浏览器厂商的军备竞赛中野蛮生长——先有了能力,后有了标准,最后留下满地碎玻璃。
一个被遗忘了六年的 API(XMLHttpRequest),让网页第一次拥有了"局部更新"的能力。网页从"文档"变成了"应用"——但操作 DOM 的方式还停留在石器时代,于是 jQuery 成…
一句话改变了一切:UI = f(state)。前端不再手动操作 DOM,而是声明"UI 应该长什么样",剩下的交给框架。组件化 + 声明式 + 虚拟 DOM,把前端从"页面制作"升级成"软件工…
框架的胜负已分,战场转移到工具链。这个时代的主题词是:类型安全、开发体验(DX)、构建速度、元框架(meta-framework)。前端从"写应用"进化到"造工厂造工具"——而工具复杂度本身,…
三十年来,前端进化的主线是"让人更少关心底层"——从手写 DOM 到声明式框架到编译器。AI 是这条主线的终点也是新起点:人第一次不再是唯一的写码者。抽象的对象,从"代码"变成了"意图"。
pnpm 解决依赖问题的关键,在于它看穿了一个被所有人接受的"假修复":npm/yarn 的扁平化 node_modules,用"幽灵依赖"和"磁盘浪费"换来了"消除嵌套地狱"——这只是把一个…
React 战胜 AngularJS,不是因为它"更好",而是因为它押对了一次范式转变:从"双向绑定 + 命令式 DOM 操作"转向"单向数据流 + 声明式 UI"。AngularJS 的失败…
Vite 撬动 Webpack 的支点,是一次教科书级的第一性原理操作:它没有去"把打包做得更快",而是重新质疑了一个被默认了十年的前提——"开发时为什么要打包?" 当浏览器原生支持了 ES-…
Vue 在中国的崛起,不是"因为作者是华人"这么简单的民族情绪故事,而是一次"工具特性"与"市场结构"的精准共振:Vue 的渐进式、低门槛、官方中文文档,恰好匹配了 2015 年前后中国前端爆…
Web Components 在每一条第一性原则上都赢了 React/Vue——它是 W3C 标准、跨框架、零运行时、永久兼容,理念近乎完美。但它没能成为应用开发的默认组件模型。原因不是它不够…
Webpack 的十年统治,不是因为它快、也不是因为它简单(恰恰相反,它慢且复杂),而是因为它提供了一个在当时无人能及的统一抽象——"一切皆模块"——并以 loader + plugin 的无…
未来 5–10 年的前端,会沿着一条清晰的主线展开:抽象对象从"代码"上移到"意图",而代码生成、运行时优化、跨端边界则全面"下沉"为自动化的基础设施。具体表现为七股相互交织的力量:① 编译时…
这是一个伪二元问题,答案不是"会"或"不会",而是要分层回答:在语法/写法层,AI 大概率会加速向主流写法收敛(马太效应);但在运行时/范式层,框架解决的是 AI 无法回避的真实工程问题(响应…
这是一个问错了的问题。Edge 不会"取代"传统的中心化 SSR,因为两者不在同一个竞争维度上——Edge 优化的是计算的位置(贴近用户),而很多 SSR 场景的瓶颈是数据的位置(贴近数据库)…
前端框架的整部历史,是一场"谁来负责把状态同步到 DOM"的责任转移史:从开发者手动操作(jQuery),到框架运行时托管(AngularJS/React/Vue),再到编译器在构建期就把活干…
2016 年,Google 做了一个前端史上最有争议的决定:把已经封神的 AngularJS 推倒重来,做一个同名却完全不兼容的新框架。它赌上了 TypeScript 和 RxJS,做成了一套…
AngularJS 用双向数据绑定这个"魔法",一度被奉为前端的未来——数据变 UI 自动变,UI 变数据也自动变。但支撑这个魔法的脏检查(dirty checking)机制,在大型应用里会让…
Backbone 是前端从"页面制作"走向"软件工程"的第一声啼哭。它第一个把 MVC 架构带进浏览器,给混沌的 jQuery 代码立下规矩——但它只给了骨架(Backbone,正如其名),血…
jQuery 不是框架,而是一层抹平浏览器差异的薄薄的兼容层。它用一个 $() 拯救了一代开发者,却也因为它的"命令式"本质,亲手为整个范式刨好了坟墓。它是前端史上最成功、也最早被范式淘汰的工…
React 用一句话重写了前端的"牛顿第一定律":UI = f(state)。你不再操作 DOM,只声明"给定这个状态,UI 应该长什么样",剩下的交给虚拟 DOM。这个范式如此根本,以至于十…
Svelte 问了一个所有人都默认跳过的问题:"虚拟 DOM 真的有必要吗?" 它的答案是把框架的工作从运行时搬到编译时——你写的组件被编译成精准操作 DOM 的原生 JS,运行时几乎不带框架…
Vue 是一场精妙的"集大成"与"做减法":它取 AngularJS 的数据绑定 + React 的组件化,扔掉两者的心智负担,做成一条任何人都能从 <script 标签起步的平缓坡道。它证明…
组件化解决了"UI 复用",却制造了一个新难题:多个组件要共享同一份状态,数据怎么流动才不乱? 整部状态管理史,是一只在两极之间摆动的钟摆:可预测性(显式、约束、样板) ⇄ 开发效率(隐式、自…
如果 Redux 说"状态不可变、变化要显式声明",MobX 就反问:"为什么?我直接改值,框架自动追踪谁用了它、自动更新不就行了?" MobX 用透明的响应式(transparent rea…
2015 年,Dan Abramov 受 Flux 和 Elm 启发,做出 Redux:单一数据源 + 纯函数 reducer + 不可变更新,把状态变化变成一条可追溯、可重放、可时间旅行的事…
Vue 生态的状态管理走了一条独立的路:Vuex 把 Redux 的单向数据流"翻译"成 Vue 风味(mutation/action + 响应式)。但当 Vue 3 + Compositio…
Zustand(德语"状态")是对 Redux 样板的一次彻底反叛:没有 Provider、没有 action 常量、没有 reducer 仪式,一个 hook 搞定全局状态。它代表了 Rea…
当 SPA 把 UI 变成"组件",Bootstrap 那套"全局 class + jQuery 插件"就过时了。Ant Design、Material-UI(MUI)、Element UI …
Bootstrap 是 CSS 框架的鼻祖,它把"做出一个像样的页面"的门槛,从"懂设计 + 会写 CSS"降到了"会抄 class 名"。它用预置样式 + 栅格系统让整整一代非设计师快速产出…
Headless UI 是整部组件库史里最关键的一次范式转变:它把一个组件拆成两半——"行为 + 状态 + 无障碍(a11y)"(那个极难、极该外包的内核)和 "样式"(那个高度个性化、该归你…
shadcn/ui 干了一件听上去离经叛道的事:它不是一个 npm 依赖。 你不 install 它,而是用 CLI 把组件的源码直接复制进你的项目。从此这些组件是你仓库里的普通文件——随便改…
UI 组件库的二十年,是一部"控制权与封装度的钟摆"史:从 Bootstrap 给你全部样式(封装最高、最省事、也最难改),到 AntD/MUI 给你完整组件(开箱即用、却样式难覆盖、与框架强…
CSS 诞生时根本没有布局系统。于是前端用了二十年时间,把一个个"本不该用来布局的工具"(表格、浮动、行内块)硬掰成布局工具,每一代都在为上一代的副作用还债——直到 Flexbox 和 Gri…
原子化 CSS 是一次"看似倒退、实则升维"的反叛。它把样式拆成一个个最小的、单一职责的 utility 类(flex、pt-4、text-center),让你像搭乐高一样在 HTML 里直接…
当前端进入组件化时代,样式遇到一个根本性的存在主义问题:样式到底属于谁? 全局 CSS 说它属于整个页面,但组件说它属于"我"。CSS-in-JS 给出了一个激进的答案——让样式和组件同生共死…
CSS 的选择器天生是全局的——这在一篇文档里无害,在一个百人团队的大型应用里却是原罪。在没有任何技术手段隔离样式的年代,前端只能靠纯粹的人类约定来对抗混乱:用命名规范、分层架构、组合思想来"…
CSS 本是为"给文档排版"而生的——它的设计假设是一篇有标题、段落、链接的静态文章。可历史把它推上了完全不同的战场:它被迫去承担应用级的复杂布局和大型团队的工程化协作。CSS 三十年的演进史…
原生 CSS 长期是一门"残废"的语言:没有变量、没有嵌套、没有函数、没有模块。开发者忍无可忍,干脆在 CSS 之上发明了一整套编程语言,编译成 CSS 再交给浏览器。预处理器用一个"编译步骤…
JS 的坑不是 Brendan Eich 不会设计语言,而是"10 天交付 + 永不破坏向后兼容"这两个约束的乘积。理解了这两个约束,你就理解了 JS 几乎所有的怪异之处。
一门10 天赶制、为蹭 Java 热度而生的"玩具语言",被时代推上了世界第一编程语言的宝座。它的整部演进史,就是一场"如何在永不破坏旧网页的前提下,把仓促设计修补成现代语言"的漫长工程——其…
ESM 的故事,是 JavaScript 用二十年时间补上"它从娘胎里就缺失的模块系统"的故事。它平息了 CommonJS vs AMD 的混战、一统江湖,但真正的革命在于它的一个属性——静态…
ES3 是 JavaScript 的"地基浇筑"版本:它本身没有任何耀眼的创新,但它第一次足够完整、又恰好被 IE6 锁死了整整十年——于是它成了 jQuery 这代库赖以生存的"最大公约数"…
ES5 是 ES4 流产废墟上长出的"务实主义之花":它放弃了一切语法革命的野心,只老老实实补齐工程师每天都在用的工具。但它埋下的一颗不起眼的种子——Object.defineProperty…
ES6 是 JavaScript 历史的楚河汉界:它一次性补齐了一门现代语言该有的一切(class、let/const、箭头函数、Promise、模块、解构),把"古典 JS"和"现代 JS"…
前端工程化的整部历史,就是两条线的螺旋上升:一条是模块化(代码如何被组织、组合、复用),另一条是开发体验(DX)(把代码变成能跑的产物,这个过程能不能快、能不能简单)。当 JS 工具自身的性能…
Babel 是整个前端生态敢于"激进使用未来语法"的安全网。它把 ES6+/JSX/TS 这些老浏览器不认的代码,通过 AST 转换"翻译"成老浏览器能跑的 ES5。它让语言进化和浏览器兼容解…
它做了一件石破天惊的事:让 Node.js 的 require() 跑在浏览器里。第一次让前端能像后端一样用 CommonJS 模块组织代码,直接复用 npm 上的海量包。它是模块打包思想的开…
它们是前端自动化的"第一代工人":把压缩、拼接、加 hash、起服务器这些重复手工活交给脚本。但它们只会"按顺序跑任务",不理解模块之间的依赖关系——这个先天缺陷,注定它们会被打包器取代。
这是一部"如何安放 node_modules"的史诗。npm 从嵌套走向扁平化,顺手制造了"幽灵依赖"这个幽灵;Yarn 补上了确定性(lockfile)并尝试激进的 PnP;pnpm 用硬链…
当 Webpack 在做"应用打包"时,Rollup 选择做"库打包"。它把 ES-Modules 当作一等公民,推广了 tree-shaking 概念,产出干净、无运行时噪音的代码。它是库作…
这是 Webpack 作者 Tobias Koppers 的"自我革命":用 Rust 重写一个打包器,作为 Webpack 的接班人。核心武器是增量计算(incremental comput…
它做了一件看似不可能的事:给一门动态语言加上渐进式的静态类型,还不破坏现有代码。靠"结构化类型 + 可编译回 JS + 顶级 IDE 体验",TypeScript 从"可选"变成了 2018 …
Vite 的成功来自一次第一性原理的发问:"为什么开发时一定要先打包?" 当现代浏览器原生支持了 ES-Modules,这个前提就不再成立了。Vite 抛弃 dev 打包,实现 no-bund…
一句话概括它的世界观:"一切皆模块"——连 CSS、图片、字体都是模块。靠 loader + plugin 两套可扩展机制,加上 code splitting 和 HMR,Webpack 统治…
这是一部"前端依赖文明"的兴衰史。它有两条交织的主线:① 包分发生态——npm registry 如何成为 JS 世界的中央仓库,SemVer 如何成为契约,以及 left-pad 如何用 1…
这是 Monorepo 工具的两代接力。Lerna(2015) 是第一代——解决"一个仓里那么多包,版本怎么管、怎么批量发布";但它没碰 Monorepo 真正的魔王:构建放大,后来维护停滞、…
Monorepo 是"把所有包塞进一个 Git 仓库"的代码组织哲学,灵感来自 Google/Facebook 的巨型单仓实践。前端拥抱它,是因为组件库 + 多应用 + 设计系统有强烈的代码共…
这是"前端依赖文明"的基础设施层。npm registry(2010 起)是 JS 世界的中央仓库——一个全球共享的代码集市;SemVer 是它的版本契约;package.json 是它的合同…
Nx(Nrwl 出品)是 Monorepo 工具光谱里最重的那一端:它不只是个缓存编排器,而是一个企业级 Monorepo 平台——项目依赖图分析、受影响检测(affected)、计算缓存(本…
2022 年,Jarred Sumner 用一门冷门系统语言 Zig 写出了 Bun。它不谈理想主义,只谈一件事:快。运行时、包管理器、打包器、测试器四合一,且兼容 Node 生态——它要做的…
2020 年,Ryan Dahl 站到台上,列出他对 Node.js 的十个遗憾,然后说:"所以我做了 Deno。" 这是技术史上罕见的一幕——原作者亲手否定自己最成功的作品,从零重写一个"如…
JavaScript 本来是浏览器里的"玩具语言",一个引擎(V8)被搬出浏览器,就改写了整个后端、工具链乃至前端工程化的命运。这条线的主题是:性能 → 生态 → 反思 → 重做——同一个问题…
2009 年,Ryan Dahl 把 Chrome 的 V8 引擎搬出浏览器,配上事件循环和非阻塞 IO,做出了 Node.js。它的真正历史意义不是"用 JS 写后端",而是让 JS 能写工…
这是一部前端的领土扩张史。前端没有满足于浏览器这块原生疆域,而是带着同一套 JS/TS 技能栈,先后向移动端、桌面端、小程序、服务端四个方向殖民。母题只有一句:用一种语言、一种心智、一支团队,…
如果说跨端是前端"向旁边长",全栈化就是前端"向下扎根"。从 Node.js 让 JS 第一次能写后端,到元框架把 API 端点和组件塞进同一个项目,再到 tRPC 用 TypeScript …
小程序是跨端史里中国独有的一个分支物种。它不是技术社区自下而上长出来的,而是超级 App 自上而下定义的——平台说"你要在我的地盘上做应用,就得用我规定的双线程模型、受限 WebView 和私…
Electron 是前端最"暴力"的一次扩张:它不抹平桌面平台的差异,而是直接把整个浏览器内核 + Node 运行时一起打包进每个 App。代价是"每个 App 都背着一个浏览器",收益是"会…
移动跨端是前端的第一次远征。前端盯着 iOS/Android 这两块原生疆域,只有一个执念:别让我用两种语言、两支团队、写两遍同一个 App。 从 WebView 套壳到 React Nati…
RSC(React Server Components)是整部"跨端与全栈"史的当代终点。过去前后端的边界是一次网络请求——显眼、可见、在 Network 面板里。RSC 把这条边界搬进了组件…
PWA 是 Web 平台一次雄心勃勃的"夺回失地"——在原生 App 抢走移动入口之后,让网页重新拥有 App 的核心能力:离线、安装到桌面、推送通知。它在技术上完全成立,在愿景上无可指摘,却…
Service Worker 是 Web 平台史上最被低估、却最具颠覆性的能力之一。它做的事只有一件,却足以改写一条公理:它在网页和网络之间插入了一层可编程的代理,从此"网页必须在线"这个从 …
Web Components 是浏览器试图把"组件化"从框架手里收编为平台原生标准的一次努力。它的理念近乎完美——跨框架、零运行时、永久兼容,正是 Web平台能力演进史 母题的标准剧本。但它也…
这是一部"平台原生能力收编框架功能"的潮汐史。框架先用 JS 在用户态造轮子(组件、路由、状态、动画、打包),浏览器原生能力成熟后,再把这些能力一项项"沉"进平台内核(Web Componen…
WebAssembly 是 Web 平台史上少有的一次"平台补上了框架根本给不了的东西"——它打破了 JavaScript 把守了二十年的天花板:"浏览器里只能跑 JS"。它让 C/C++/R…
浏览器是前端唯一的"操作系统"。它的三十年史,本质是两次惨烈战争 + 一次大一统——能力从厂商手里的私货,变成 W3C/TC39 的公共标准,最后渲染引擎收敛到几乎只剩一家。赢家定义了 Web…
Chrome 不只是赢了第二次浏览器战争,它重新定义了浏览器是什么——多进程沙箱 + V8 JIT + 自动静默更新。而 V8 这颗心脏一旦跑出浏览器,就催生了 Node.js,解锁了前端工程…
浏览器战争的终局不是某个品牌赢了,而是渲染引擎收敛到了几乎只剩一家。Blink 实质一统,WebKit 靠 iOS 政策守住一极,Gecko 是最后的独立孤岛。兼容性地狱终于结束了——代价是 …
同一个 width,IE 和标准浏览器算出来的宽度不一样——这个看似微小的分歧,折磨了整整一代前端工程师,也成了"没有标准的野蛮生长会留下多深的债"的最佳注脚。
它靠捆绑赢得了第一次浏览器战争,又因为"赢了就躺平"把整个 Web 拖进五年停滞。但它在 IE5 里随手塞进的一个 API——XMLHttpRequest——竟意外引爆了下一个时代。IE 是前…
它是 Netscape 战败后从开源灰烬里飞出的复仇者,凭"轻、快、尊重标准"在 IE6 的停滞期撕开缺口,重新点燃了第二次浏览器战争。今天它份额萎缩,却成了对抗 Chromium 一统的最后…
它是把 Web 带给全人类的开拓者,是 JavaScript 的诞生地,也是第一次浏览器战争里赢了产品、输了渠道的悲情英雄。它死了,但它的两个遗产——JS 和开源的 Mozilla——定义了之…
"怎么把前端送到用户面前?"——这条线索有一个贯穿始终的主旋律:算力的位置一路向用户靠近。 从中心化服务器(代码跑在远方机房)→ CDN(静态产物缓存到边缘)→ Jamstack(预构建静态 …
CDN 是"算力位置一路向用户靠近"这条主线上的第一步:它不改变代码在哪渲染,只是把已经生成好的静态产物复制到全球边缘节点,让用户就近取货。它把"延迟"这个物理问题,从"加快服务器"变成了"缩…
Edge 是"算力向用户靠近"这条主线的当前终点:代码不再跑在某个遥远的数据中心,而是跑在离用户最近的那个 CDN 边缘节点上,冷启动从秒级压到毫秒级。它让 CDN与静态托管的"货架"长出了"…
Jamstack 把架构反过来了:先把页面预构建成静态文件扔到 CDN(快、便宜、安全),动态能力交给客户端 JS 调 API 去补。 它是 CDN与静态托管能力的"架构化"——一套以"静态优…
Serverless 不是"没有服务器",而是"你不用管服务器"。它把"运行时计算"从一台你要长期维护的机器,变成了一段按需触发、用完即走、按用量计费的函数。它正是 Jamstack 缺失的那…
前端测试史不是"工具的更替史",而是一部"测什么才给信心"的认知升级史。从"前端不需要测试",到"像测后端一样测前端"(测实现细节),再到"像用户一样测前端"(测行为)——每一次跃迁的本质,都…
E2E(端到端)测试一直是前端测试里信心最高、口碑最差的一层:它测的是"用户在真浏览器里走完整条路径",理论上最值钱;但十年来它的代名词是"又慢又脆(slow & flaky)",以至于很多团…
在 Jest 之前,搭一套前端单元测试要自己拼"跑测试的(Mocha)+ 断言的(Chai)+ mock 的(Sinon)+ 覆盖率(Istanbul)"四个零件。Jest 的杀手锏不是某项技…
组件测试史的转折点不是某个 API,而是一句颠覆性的价值观:"测试要像用户一样使用你的组件,而不是去验证它内部是怎么实现的。" Enzyme 教前端"打开组件、检查它的 state 和 pro…
Vitest 的存在理由可以浓缩成一句话:"你的应用已经用 Vite 转换代码了,为什么测试还要再养一套 Jest 的转换管线?" 它复用 Vite 的同一套配置和转换管线来跑测试,顺手抄了 …
Agent 是这一代 AI 编程的"引擎"——让 AI 从建议者变成能自主行动的执行者;MCP(Model Context Protocol) 是这台引擎的"标准接口"——让 AI 用一套开放…
前面几代都是"在旧流程里塞 AI":补全、编辑、Agent,本质还是"人写代码、AI 帮忙"。AI-Native 是反过来——以 AI 为中心重新设计整个开发流程,让人主要负责"描述意图",A…
这不是"AI 学会了写代码"的故事,而是 "AI 在开发流程中的角色不断上移" 的故事。它从副驾(补全) 走向 执行者(Agent),再走向 协作者(AI-Native);与此同步,人操作的对…
Claude Code(Anthropic 出品)代表了 AI 角色的又一次上移:从"在编辑器里帮你改代码"到 "在终端里自己把任务做完"。AI 第一次不只是建议者,而是执行者——它读文件、改…
Cursor 是 AI 编程的范式分水岭:它不再把 AI 当成"嵌进编辑器的插件",而是 fork 整个 VS Code、把编辑器重新围绕 AI 来组织。从此 AI 不是副驾,而是坐进了仪表盘…
Copilot 是 AI 编程的"登月第一步":它没有试图取代程序员,而是选了最低风险、最高频次的切入点——编辑器里的代码补全。人始终在驾驶位,AI 只是副驾(co-pilot,这个名字本身就…
flowchart TD
title 前端技术演化史 · 关键事件时间线 (1995-2025+)
flowchart LR
jquery["jQuery 2006<br/命令式起点"]
flowchart LR
这是前端最核心的张力。命令式给你完全的控制力和透明度,但要求你管理每一个状态转移;声明式把"怎么做"交给框架/运行时,换来心智负担的解放,代价是失去对底层的直接掌控。
