引言
在对用户体验不懈追求的驱动下，前端技术不断迭代，推动了用户与开发者两端的体验提升。本文将按阶段梳理前端技术的演进路径，突出各时代的代表性技术，以勾勒其历史轨迹。
早期阶段
万维网诞生之初，网页尚属新鲜事物。主要技术是 HTML 与 CSS：HTML 负责结构与内容，CSS 负责基础样式，交互能力有限。由于缺乏成熟的布局技术，表格布局一度流行（Hoffmann, 2017）。再加上页面内容基本静态，网页能提供的功能十分受限，整体用户体验与期望值都不高。
Web 2.0 的开端
动态网页——能从外部数据源加载数据以向用户呈现动态内容——被视为 Web 2.0 的标志之一。随着 1995 年 12 月 JavaScript 的引入，它具备了操作 DOM 的能力，极大丰富了网页交互（Rauschmayer, 2014）。自此，HTML、CSS、JavaScript 组成了前端世界的基础技术栈。不过，当时仍以后端渲染与填充数据为主，JavaScript 主要用于增强交互界面。
jQuery 与 Ajax
传统服务端渲染的问题在于：重复渲染、前后端逻辑耦合紧密，资源利用低效、代码库臃肿。为应对这些问题，前后端分离的范式兴起。以简化 DOM 操作为著称的 jQuery（Duckett, Moore & Ruppert, 2014）成为这一转变的标志。开发者通过 Ajax 调用接口获取数据，再用 jQuery 将其插入页面，从而实现局部刷新，提升用户体验。
现代前端
随着项目规模增大，手写 DOM 操作变得易错且难维护，随之而来的是一系列工程化问题。为解决这些问题，出现了诸多方案：用于依赖管理与自动化的 npm，用于模块打包的 webpack，用于兼容性的 babel，以及 React、Vue、Angular 等现代框架，提供自动化 DOM 更新与可复用组件能力（Jang, 2017）。借助这些技术，开发者可以把精力聚焦在更小粒度的业务单元（页面/组件）上，整体健壮性得到提升。局部刷新进一步升级为单页应用（SPA），带来无缝体验，自此进入现代前端时代。
服务端渲染回归
然而，SPA 也有短板：首屏慢、SEO 不友好。以 Next.js 为代表的现代服务端渲染重新受到关注。它在服务端根据预定义骨架完成首屏渲染并尽快返回，缩短首屏时间（Osmani & Miller, 2024）。当浏览器加载完必要的 JavaScript 后，再接管后续渲染，形成「水合」过程，既享受 SSR 的首屏速度，也保留 SPA 的交互体验。
结语
总的来说，本文回顾了前端技术从早期到现代的五个里程碑。每一次迭代都在修复上一阶段对用户体验的掣肘。
参考
- Hoffmann, J. (2017, May 1). Tables for Layout? Absurd. The History of the Web.
- Rauschmayer, R. (2014). How JavaScript Was Created. Speaking JavaScript. O’Reilly Media.
- Duckett, J., Moore, J., & Ruppert, G. (2014). JQUERY. JavaScript & jQuery: interactive front-end web development. John Wiley & Sons Inc.
- Jang, P. (2017, October 18). Modern JavaScript Explained for Dinosaurs. Peterxjang.
- Osmani, A., & Miller, J. (2024). Rendering on the web. web.dev.