Web开发技术发展简析

吴新华

Web开发技术发展简析

吴新华

（萍乡学院 信息与计算机工程学院，江西 萍乡 337000）

通信和网络技术的迅速发展，基于B/S架构的Web开发已经取代桌面开发成为发展的主流， Web开发技术发展的目的是减少前后端开发人员的耦合，提高开发效率。文章阐述了Web开发技术的发展历程，并分析了各个阶段开发技术的应用场景以及优劣势，为应用型本科高校的计算机相关专业的教学提供了良好的课堂素材。

Web开发；B/S架构；前后端分离

1 背景

Web程序开发总体需求就是Request和Response的过程，用户在客户端（浏览器）发送请求，服务器端接收到请求，首先根据请求头中的Token 进行用户鉴权，然后分析需求，执行数据库的CRUD操作，将处理后的结果返回给客户端展现给用户[1]。最早的Web项目界面简陋，功能简单，没有专门的前端美工人员，项目的前、后端都是由后端程序员负责[2]。后端程序员既要熟练掌握前端（Html、CSS、Javascript）知识，又要掌握后端（Java、C#、PHP）知识，还必须熟悉数据库（SQL）知识，也就是我们常说的全栈开发人员。这种开发模式对程序员的要求很高，不利于项目的分工协作和后期的升级维护。随着时代的发展和技术的更新，许多Web项目开发模式开始把前后端的界限分得越来越清晰，前端工程师只负责前端开发，后端工程师只负责后端开发，前后端逐步分离[3]。

前端业务追求页面流畅，版式精致，良好的用户体验，前端程序员工作重点是网页设计，包括最新的Html5、CSS3标准，JavaScript基础，各种前端框架（Vue js，Node.js）；后端业务追求高并发、高存储、高性能，数据安全，后端程序员工作重点为Linux操作系统，软件设计模式，JVM原理，SSH或SSM框架工作原理及源码，网络协议等。

2 静态Html时代

静态Html时代最早的Web开发技术架构，通常只要几个人就可以完成一个小型项目的开发，所有的业务逻辑全部放在服务器端，前端浏览器只负责页面的显示，用户从客户端浏览器发出请求，Web服务器建立连接，接收用户请求，解析并生成静态的Html页面，再返回到客户端。静态Html架构如图1所示。

图1 静态Html架构

静态页面模式的优点是开发快速敏捷，只要架设一个服务器，所有的开发和调试都能在本地完成。静态网页不需要连接后台数据库，因此响应速度很快，适合于做内容相对固定的网页，例如：旅游风景区介绍、学校的发展历史，人员简介等等，且很容易被谷歌、百度等搜索引擎检索。但如果项目很庞大，业务逻辑复杂，需要更多的开发人员时，就会遇到以下各种问题：

（1）业务逻辑较多时，代码之间的调用关系变得复杂，需要更多的时间去调试和测试，开发人员可以搭建集中服务器的开发环境来解决这些问题，这种开发方式对于后端程序员没有影响，但对前端开发将会变得不友好，如果前端页面想改变一种界面颜色或字幕样式，要经历本地开发、上传代码到服务器、页数生成等几个烦琐步骤，如此周而复始，无形中延长了开发周期，降低了开发效率。

（2）静态网页无法连接数据库，静态页面的数据是固定的，如果业务数据要更新，只能通过程序员手动逐一更改单个页面的方式，在互联网初期，数据量较少，这种方式尚可以接受，但对于现在的互联网体系，数据量呈几何级的增长，例如淘宝、京东等商城系统，每天都有海量的数据更新，如果仍然以静态网页技术去解决，就会浪费极大的人力和物力，团队协作将会变得无比复杂，系统调试、测试、后期维护等也将无法实现。

为了解决以上问题，Web开发技术开启了第二阶段的征程。

3 Servlet时代

图2 经典MVC架构

经典MVC体系架构的工作流程如下所示：

首先用户从浏览器发出请求，控制器（Servlet）接收用户请求，经过用户鉴权，业务处理，然后响应给适当的JSP页面；接着Servlet根据需求执行数据库的增删改查操作，将结果数据生成特定对象；最后视图端调用方法得到对象中的数据，采用相应的模板引擎，完成视图渲染。

代码编写测试完成后，将项目前后端代码（包括JS、CSS资源文件、第三方库等）打成一个War包，接下来步骤是将这个War包部署到Web容器中，然后启动向外提供服务。用户在浏览器中输入项目网站域名，浏览器通过域名服务器解析服务器外网IP地址，将Http请求发送到服务器，经过三次握手成功之后，服务器开始接收参数，执行业务需求，通过Tcp协议开始传输数据，之后返回应答给浏览器，浏览器解析并返回给用户。

现在来分析上述流程，假设项目网站首页中有50张图片，从用户视角来看，就是一次Http请求，但代码内部执行其实并不是一次，因为用户在第一次访问的时候，本地浏览器中还没有缓存，下载50张图片，意味着浏览器要发出50次Http请求，服务器每次接收到请求，都需要耗费内存完成传输，这时服务器承载的压力会非常大，因为页面中的所有请求都是由这台服务器承载。如果业务量井喷，一万人并发访问网站，那对服务器的硬盘、内存、网络带宽、IO接口等都是非常大的考验，稍有不慎，就会导致系统的崩盘。

4 SPA时代

移动互联端硬件没有PC端丰富，传统的MPA（多页应用）由多个独立页面组成，页面间切换缓慢，需要耗费更多的资源，在移动互联端不能流畅地运行，导致用户体验性较差，多页应用如图3所示。

图3 多页应用

Single Page Application（单页应用）由一个外壳页面和多个页面片段组成，在首次加载完外壳页面后，后续多个页面间的跳转和切换只是页面片段的隐藏或删除，不需要整个页面的切换，只是局部刷新，减轻了服务器的负担，程序运行非常流畅，因此SPA开发技术在移动互联端的应用越来越广泛，单页应用如图4所示。

图4 单页应用

SPA单页应用提供给Web端或本地端的都是Json数据格式的应用程序接口，其工作流程如下所示：

首先启动前端应用，加载Html页面、音视频、图片、JavaScript、CSS等基本公共资源；接着Web浏览器或Native端发出异步（Ajax）请求，后端处理请求，返回Json格式的数据，后端并不参与前端视图的渲染，因此处理速度极快；最后前端将返回Json数据插入相应逻辑模板中完成DOM数据格式的页面渲染。

产品类别进一步划分为：机电产品（较轻）、机电产品（较重）、轻工产品（较轻）、轻工产品（较重）、农林牧渔和其他产品。美方现已正式公布的500亿美元征税商品清单，涵盖了1 102个税号的产品，此外，在4月份提出考虑在301条款下追加1 000亿美元征税商品，将涉及更大范围的产品。我国出口美国第一位的机电产品（轻、重）将受到重大冲击。其中，机电较轻类涉及贸易金额970亿美元，机电较重类涉及370亿美元，占征税商品1 500亿美元的89%；占2017年我国对美出口机电产品（轻、重）的69%。

单页应用开发模式的优点：（1）良好的用户体验，应用程序运行流畅，页面动态数据都是通过Ajax异步获取，页面只需局部刷新，不需要整个页面的切换，后端服务器响应迅速；（2）良好的应用移植性，后端API接口标准化，可以无缝连接移动手机端、平面电脑、Web端，一套后端对应多个前端，增强了代码的复用性；（3）良好的分工协作模式，前后端代码分离，并行开发，出现Bug可迅速定位，及时清除。

单页应用开发模式的缺点：（1）Web网站首次要加载大量静态基础资源，服务器和客户机硬件资源消耗严重，会出现载入卡顿，虽然也有懒加载、服务器渲染等相关解决机制，但也不能完全避免；（2）如果应用程序业务复杂，对前端程序员的要求较高，前端JS的代码量将非常庞大，需要多次向服务器端发送Http请求，造成页面渲染缓慢；（3）容易出现SEO问题，难以被谷歌、百度等搜索引擎收录[4]。

5 Node.js时代

5.1 Node.js运行机制

经典MVC架构在同步处理的业务场合效率较高，但却不擅长异步处理。单页应用SPA在一定程度上实现了前后端分离，但只适合移动端应用程序开发，对Web情景下同步处理显得有心无力，而且也存在上一节所述的各种缺点。为了解决这些问题，Node.js开始应运而生。

为了实现服务器的高效运转，Node.js引进了非阻塞机制，非阻塞和Ajax的异步请求有异曲同工之妙，非阻塞机制下服务器接收到处理请求时会抛给一个底层子进程，主进程不需要同步等待处理结果，服务器主进程会一直循环，当底层子进程处理完请求，再通过回调函数将结果发送给服务器主进程。Node.js与传统架构不同的是前端不仅仅只负责视图（View）层，而且把本属于后端控制层（Controller）也接管过来，这时后端就只专注于数据Model层和业务逻辑处理，Node.js的运行机制如图5所示。

图5 Node.js运行机制

从图5可以清晰看到Node.js是处于中间层的位置，前端应用不再直接发送Ajax异步请求给后端，而是先发送到Node.js，Node.js再发送Http请求到后端，后端返回无差别的Json数据，Node.js接收到数据后再渲染出前端视图呈现给用户。增加Node.js作为中间层，具体有以下优点。

（1）增强可移植性；增加Node.js中间层，可以由Node.js维护各自controller层，如果前端需求发生改变，则无需再和后端沟通，自己就可以专职维护，前端专注视图效果，后端专注于业务逻辑，前后端分工协作、各司其职。

（2）提高反应速度：因为前后端属于不同的语言系统，数据格式和数据处理存在差异，当后端返回给前端的数据量大的时候，相应的处理时间就会明显增长，前端界面会有明显的滞后效应，这时候，采用Node.js分担前端数据处理逻辑，可以加快前端数据处理速度，增加系统的灵活度和响应度。

（3）增强系统性能：有时会有一种业务情景，前端请求一个页面，可能需要调用多个后端接口才能得到这个Json数据，业务越复杂，处理速度就会越慢，特别是在移动互联端时，硬件资源较为贫乏，性能就会越受影响，采用Node.js作为中间层，采集好后端发送的多个数据，组装成对象或集合再统一发送给前端，系统性能将得到成倍提升。

5.2 Node.js案例

使用 Node.js 实现简易登录与注册案例的代码如下所示：

创建服务代码如下所示：

写完后启动Http.js，要执行的文件每次有更新都要重新用Node执行一次，在浏览器中输入Localhost: 3000/index会看到Index.Html页面，如图6所示。

图6 登录注册首页

6 总结

从古老的Html静态网页开始，到经典的JSP+Servlet+JavaBean的MVC体系框架，再到SSH（Spring + Struts + Hibernate）和SSM（Spring + SpringMVC + Mybatis）的Java体系框架，然后是前端框架（AngularJS、VueJS、ReactJS）为主的SPA、MVP时代，目前最新的是Node.js引领的前后端分离的全栈时代，Web开发技术和编程架构的发展从未停止，一直紧跟时代的步伐[5]。Ajax（SPA）应用给前端开发带来了一次质的飞跃，Node.js 是第二次飞跃，未来编程模式的发展，前后端的职责会越来越清晰，开发效率会更高效。

[1] 李燕安. 基于Java的Web开发技术的探讨[J]. 中国新通信, 2020, 22(8): 73–73．

[2] 李广宏. Web平台前端开发设计[J]. 计算机与网络, 2020, 46(15): 32–32.

[3] 何晶. 以SSH框架与jQuery技术为基础的Java-Web开发应用探讨[J]. 计算机产品与流通, 2019(11): 104–105.

[4] 刘彤彤. 单页面应用程序(SPA)的优缺点[EB/OL]. (2019-07-09) [2022-01-11]. https://www.cnblogs.com/belongs-to-qinghua/p/11151054.html.

[5] 阿里云开发者. Web开发的历史发展技术演变 [EB/OL]. (2020-08-24)[2022-01-15]. https://blog.csdn.net/alitech2017/ article/details/108200495.

Analysis on the Development of Web Developing Technology

WU Xin-hua

(School of Information and Computer Engineering, Pingxiang University, Pingxiang Jiangxi 337000, China)

With the rapid development of communication and network technology, web development based on B/S architecture has replaced desktop development as the mainstream of development. The purpose of the development of web development technology is to reduce the coupling of front- and rear-end developers and increase development efficiency. This paper systematically expounds the development process of web developing technology, and analyzes the application scenarios, advantages and disadvantages of developing technology in each stage, which provides good teaching resources for computer-related majors in application-oriented undergraduate colleges and universities.

web development; B/S architecture; front- and rear- end separation

2022-04-14

江西省高等学校教学改革研究课题（JXJG-21-22-5）

吴新华（1975—），男，江西萍乡人，讲师，硕士，研究方向：计算机应用技术。

TP311

A

2095-9249（2022）03-0069-04

〔责任编校：陈楠楠〕