跳转至

Web 应用的历史

软件工程说不定是门文科

Web 技术事实上是从上世纪开始不断迭代的,受到各大公司、标准化组织的影响的,一种变化巨大的技术栈。想要学习明白 Web 技术,必然需要耗费一定的时间学习 Web 技术的历史。

Web 的基础

首先需要了解 HTML。HTML 即超文本标记语言(Hyper Text Markup Language),其是一门规定了网页上元素结构的标签语言。浏览器则是将 HTML 渲染到屏幕上的一类软件。

最早的 Web 应用完全基于 HTML,原理就是用户向服务器发送请求,服务器渲染并应答一份 HTML 文件,由用户的浏览器渲染到屏幕上。

然而随着信息量的增大和信息形式的增多,用户希望提高网页的交互性。基于这一需求,网景公司开发了一门脚本语言,即 JavaScript,从而令网页具有了简单的动效。

但即使有了基础的动效,基础的网页依然不能满足用户,因为此时网页极为简陋和粗糙。HTML 本质只规定了各个元素的结构,并没有指定元素的样式和布局。此时,CSS,即层叠样式表(Cascading Style Sheet)出现了。经过多年的标准化,CSS 最终也成为了网站的标配。

至此,网页的基础已经构成了,即规定架构的 HTML、规定样式的 CSS 和规定用户交互的 JS。

动态网页技术

上述描述的是静态网页,静态网页的缺陷在于需要去编写大量的 HTML 文件。即使不同的两个网页之间的差别可能仅仅是某一项数据不同,其依然需要完整编写两个 HTML 文件。

动态网页出现的标志是 PHP 的出现,其允许了服务器端在渲染 HTML 的时候与数据库交互等,这样就使得服务器端生成 HTML 变得更为灵活和简易。在此之后,ASP(全称 Active Server Page)与 JSP(全称 Java Server Page)相继出现,使得服务器端 HTML 渲染更为简洁。

不过需要注意,此时服务器依然是直接返回渲染后的 HTML 给浏览器显示,无论是手写的静态 HTML 还是通过 JSP 生成的 HTML,对浏览器而言没有差别。

AJAX 与 CSR 的出现

即使出现了动态网页,服务器依然是发送整个渲染后的 HTML,这种模式被称为 SSR(服务器侧渲染,Server Side Rendering)。SSR 的缺陷在于,无论页面发生了多么小的改动,即使只是一行文本的变化,浏览器都需要向服务器重新请求一份完整的 HTML,这导致网络压力极大。

另外,从开发者角度,服务器侧的开发者需要同时掌握 HTML 拼接、数据库访问、网络请求处理等多项技术栈,各种需求高度耦合,如果多人协作可能还会出现代码管理混乱等现象。

此时 AJAX(全称 Asynchronous JavaScript And XML)出现了,其核心的优势在于允许网页局部更新。AJAX 技术简而言之就是令 JavaScript 在浏览器上运行,控制 DOM 的结构以实现网页动态更新。DOM(全称 Document Object Model)是浏览器处理 HTML 时生成的,可以理解为浏览器将标签语言转化为了一个树状数据结构来管理网页,而 AJAX 技术使得我们可以动态操作 DOM。

这个时候前后端的分离就已经初见雏形了,因为基于 AJAX 的浏览器完全可以不要再从服务器取回完整的 HTML 了,只需要服务器提供必要的数据和指导就可以自行更新网页。

在 AJAX 基础上,开发者完全可以将网页中静态的部分分离出来作为 HTML 模板,并把获取数据和更新网页的 JavaScript 嵌入到模板中,这套模板存放在一个服务器 A 上。浏览器先从 A 服务器取回模板,然后根据其中嵌入的 JavaScript 从数据服务器 B 处获取真正的数据(服务器 B 需要与数据库交互),然后根据这些数据渲染出完整的网页。

这套方案就是所谓的 CSR(客户端侧渲染,Client Side Rendering),因为实际的网页渲染交给了客户端。在这一框架下,网络压力极大降低,因为体积较大的 HTML 模板只要获取一次。

另外,由于服务器 A 和服务器 B 的分离,开发者事实上也就实现了解耦合。服务器 A 的开发者只需要专注与美工对接,实现模板与简单的数据交换逻辑,而服务器 B 的开发者则可以专注于用户鉴权、数据库交互、性能优化等任务。这也就是俗称的前后端分离,服务器 A 就是前端服务器,服务器 B 就是后端服务器。

作者: Ashitemaru