我们现在基本每天都会浏览网站，那么网站的开发其实经历了几个较大的演进历程，接下来从特定视角介绍一下主要开发模式的演化过程。

• 静态网站
• 动态网站
• 服务端渲染与客户端渲染结合
• 前后端分离

静态网站

早期的网站基本上都是静态的，所谓静态并不是页面是静止的，没有动画效果，而是把网站所有的网页开发好之后直接上线部署到服务器上，那么这些页面就固定放到服务器之上，如果上线时是100个页面，那么如果不更新，该网站就是写死的100个页面了，这就是所谓的“静态网站”。静态网站的内容主要包括HTML、CSS、javascript代码，图片、字体文件、音频、视频等资源。其交互流程如下图所示：

静态网页访问流程

• 客户端向服务器发送请求
• Nginx根据请求路径获取网页内容
• 将页面内容传输给客户端
• 客户端展示网页效果

静态网站有明显的局限性：

1. 如果需要更新页面的内容，比如说，每个页面添加一条广告信息，会很麻烦，需要一个一个页面进行修改，工作量比较大，尤其是大规模的网站，这种方式基本不可行。
2. 无法实现交互效果，比如登录，发表评论、点赞等功能。

动态网站

鉴于静态网站的问题，后来就诞生了动态网站技术、比如PHP、JSP、ASP等。所谓的动态网站也不是页面有动画，而是指页面是通过技术手段动态生成的。比如银行的账单页面，张三和李四会看到不同的数据，但是在服务器中仅仅一个动态页面就够了，当张三和李四分别访问该动态页面时，会分别动态生成两个不同的HTML页面，动态性体现在HTML的动态生成上。

以PHP动态网站技术为例，具体流程如下

• 客户端访问服务器的php页面
• Nginx根据请求路径找到php文件
• Nginx把php文件交给php运行环境进行编译，转换成静态HTML页面，然后交给Nginx
• Nginx把动态生成的HTML页面返回给客户端
• 浏览器展示页面效果

服务端渲染与客户端渲染结合

无论是静态网站还是动态网站，当浏览器发送请求之后，如果服务器返回内容的时间比较慢（可能是网络问题），那么浏览器只能等待，处于阻塞状态，呈现出的效果就是长时间白屏，在当今快节奏的生活模式下，坐高铁、吃快餐......这些习惯已根深蒂固，当一个页面3秒左右不出来，我们甚至都不愿意去等。

所以为了改善用户体验，2005诞生了一种技术Ajax，他可以使浏览器在不阻塞的情况下，向服务器发送请求，用户是无感知的，当服务器返回数据后，页面再根据数据进行局部更新。有了Ajax这种技术，再配合jQuery，基本上就成了前端的主要开发模式，这也是此后jQuery近10年的辉煌时期（当然现在有了更好的选择—Vue/React/Augular）。

接下来需要着重解释一个概念：渲染。所谓的渲染就是把数据填充到HTML标签的过程。

还是以查看账单的场景为例，账单数据一般都是存储在数据库中，那么php代码会从数据库中查询出数据然后拼接到HTML标签代码中，这个过程发生在服务器，所以称之为服务端渲染。流程如下图所示：

客户端请求得到服务端渲染的HTML页面之后先进行展示，如果用户触发操作要更新页面，还可以通过Ajax请求获取后端返回的数据（当前基本上是JSON格式的数据），从而实现页面的局部更新。比较典型的场景有触底加载更多列表内容的效果，当页面滚动到底部的时候，页面上面的内容不会消失，而是在底部显示Ajax请求的一页新的数据，这种效果体验非常好。那么服务器如果仅仅返回JSON数据，页面端会通过javascript代码把数据填充到HTML标签中进行显示，这种数据填充标签的过程发生在浏览器，即所谓的客户端渲染。

jQuery时代基本上是服务端渲染和客户端渲染结合使用，一般主页面采用服务端渲染，主页展示之后，后续页面局部更新操作一般基于Ajax，采用客户端渲染方式，从而提升交互体验。

前后端分离

随着互联网的持续繁荣，客户端基于Ajax渲染的业务场景越来越复杂，那么把JSON数据拼接到HTML标签中的代码实现越来越繁琐，代码变得难以维护。虽然出现了像art-template之类的前端模版引擎，从某种程度上有所改善，但是像事件处理还是需要自己去操作，并未从根本上解决问题。

好在2009年一种技术的诞生奠定现今前端更加繁荣的开发模式：Node.js

Node.js可以让javascript运行在非浏览器环境，并且提供了对接底层操作系统API的能力。经过十多年的发展，这个生态已经非常繁荣。新兴的前端框架基本都是构建在Node.js生态之上，包括目前比较流行的AngularJS、Vue、React。

新兴前端框架，比如以React为例，基本上颠覆了前端代码的开发模式，将程序员从繁琐的DOM操作中解脱出来，而仅仅需要关注数据处理和业务操作，从而大大简化了前端的代码实现。此外更重要的一点就是，前后端从项目结构和开发流程上彻底分离，让前端和后端可以更加专注（其实都可以少掉点儿头发），而之前很多后端基本都是做全栈的工作。

在这种前后端分离的开发模式下，具体流程如下

在这种前后端分离的模式下，前后与后端的对接仅仅需要约定一种接口（接口细节包括请求地址，请求方式、请求参数，后端返回的结果），那么这种接口是与技术无关的，所以前后的技术选型可以自由设计，前端可以选择React、Vue等都可以，后端可以选择java、PHP、python等亦无所谓。

对于前端来说，一个很大的变化，就是前端项目可以单独实现工程化，可以独立设计、开发、测试、部署上线以及运维等。所以这套流程靠后端已经不太容易兼职搞定了，所以前端工程师这个岗位才有了一席之地，并且可以与后端工程师分庭抗礼。