Web開發(fā)技術(shù)發(fā)展簡析

吳新華

Web開發(fā)技術(shù)發(fā)展簡析

吳新華

（萍鄉(xiāng)學(xué)院 信息與計算機工程學(xué)院，江西 萍鄉(xiāng) 337000）

通信和網(wǎng)絡(luò)技術(shù)的迅速發(fā)展，基于B/S架構(gòu)的Web開發(fā)已經(jīng)取代桌面開發(fā)成為發(fā)展的主流， Web開發(fā)技術(shù)發(fā)展的目的是減少前后端開發(fā)人員的耦合，提高開發(fā)效率。文章闡述了Web開發(fā)技術(shù)的發(fā)展歷程，并分析了各個階段開發(fā)技術(shù)的應(yīng)用場景以及優(yōu)劣勢，為應(yīng)用型本科高校的計算機相關(guān)專業(yè)的教學(xué)提供了良好的課堂素材。

Web開發(fā)；B/S架構(gòu)；前后端分離

1 背景

Web程序開發(fā)總體需求就是Request和Response的過程，用戶在客戶端（瀏覽器）發(fā)送請求，服務(wù)器端接收到請求，首先根據(jù)請求頭中的Token 進(jìn)行用戶鑒權(quán)，然后分析需求，執(zhí)行數(shù)據(jù)庫的CRUD操作，將處理后的結(jié)果返回給客戶端展現(xiàn)給用戶[1]。最早的Web項目界面簡陋，功能簡單，沒有專門的前端美工人員，項目的前、后端都是由后端程序員負(fù)責(zé)[2]。后端程序員既要熟練掌握前端（Html、CSS、Javascript）知識，又要掌握后端（Java、C#、PHP）知識，還必須熟悉數(shù)據(jù)庫（SQL）知識，也就是我們常說的全棧開發(fā)人員。這種開發(fā)模式對程序員的要求很高，不利于項目的分工協(xié)作和后期的升級維護(hù)。隨著時代的發(fā)展和技術(shù)的更新，許多Web項目開發(fā)模式開始把前后端的界限分得越來越清晰，前端工程師只負(fù)責(zé)前端開發(fā)，后端工程師只負(fù)責(zé)后端開發(fā)，前后端逐步分離[3]。

前端業(yè)務(wù)追求頁面流暢，版式精致，良好的用戶體驗，前端程序員工作重點是網(wǎng)頁設(shè)計，包括最新的Html5、CSS3標(biāo)準(zhǔn)，JavaScript基礎(chǔ)，各種前端框架（Vue js，Node.js）；后端業(yè)務(wù)追求高并發(fā)、高存儲、高性能，數(shù)據(jù)安全，后端程序員工作重點為Linux操作系統(tǒng)，軟件設(shè)計模式，JVM原理，SSH或SSM框架工作原理及源碼，網(wǎng)絡(luò)協(xié)議等。

2 靜態(tài)Html時代

靜態(tài)Html時代最早的Web開發(fā)技術(shù)架構(gòu)，通常只要幾個人就可以完成一個小型項目的開發(fā)，所有的業(yè)務(wù)邏輯全部放在服務(wù)器端，前端瀏覽器只負(fù)責(zé)頁面的顯示，用戶從客戶端瀏覽器發(fā)出請求，Web服務(wù)器建立連接，接收用戶請求，解析并生成靜態(tài)的Html頁面，再返回到客戶端。靜態(tài)Html架構(gòu)如圖1所示。

圖1 靜態(tài)Html架構(gòu)

靜態(tài)頁面模式的優(yōu)點是開發(fā)快速敏捷，只要架設(shè)一個服務(wù)器，所有的開發(fā)和調(diào)試都能在本地完成。靜態(tài)網(wǎng)頁不需要連接后臺數(shù)據(jù)庫，因此響應(yīng)速度很快，適合于做內(nèi)容相對固定的網(wǎng)頁，例如：旅游風(fēng)景區(qū)介紹、學(xué)校的發(fā)展歷史，人員簡介等等，且很容易被谷歌、百度等搜索引擎檢索。但如果項目很龐大，業(yè)務(wù)邏輯復(fù)雜，需要更多的開發(fā)人員時，就會遇到以下各種問題：

（1）業(yè)務(wù)邏輯較多時，代碼之間的調(diào)用關(guān)系變得復(fù)雜，需要更多的時間去調(diào)試和測試，開發(fā)人員可以搭建集中服務(wù)器的開發(fā)環(huán)境來解決這些問題，這種開發(fā)方式對于后端程序員沒有影響，但對前端開發(fā)將會變得不友好，如果前端頁面想改變一種界面顏色或字幕樣式，要經(jīng)歷本地開發(fā)、上傳代碼到服務(wù)器、頁數(shù)生成等幾個煩瑣步驟，如此周而復(fù)始，無形中延長了開發(fā)周期，降低了開發(fā)效率。

（2）靜態(tài)網(wǎng)頁無法連接數(shù)據(jù)庫，靜態(tài)頁面的數(shù)據(jù)是固定的，如果業(yè)務(wù)數(shù)據(jù)要更新，只能通過程序員手動逐一更改單個頁面的方式，在互聯(lián)網(wǎng)初期，數(shù)據(jù)量較少，這種方式尚可以接受，但對于現(xiàn)在的互聯(lián)網(wǎng)體系，數(shù)據(jù)量呈幾何級的增長，例如淘寶、京東等商城系統(tǒng)，每天都有海量的數(shù)據(jù)更新，如果仍然以靜態(tài)網(wǎng)頁技術(shù)去解決，就會浪費極大的人力和物力，團隊協(xié)作將會變得無比復(fù)雜，系統(tǒng)調(diào)試、測試、后期維護(hù)等也將無法實現(xiàn)。

為了解決以上問題，Web開發(fā)技術(shù)開啟了第二階段的征程。

3 Servlet時代

圖2 經(jīng)典MVC架構(gòu)

經(jīng)典MVC體系架構(gòu)的工作流程如下所示：

首先用戶從瀏覽器發(fā)出請求，控制器（Servlet）接收用戶請求，經(jīng)過用戶鑒權(quán)，業(yè)務(wù)處理，然后響應(yīng)給適當(dāng)?shù)腏SP頁面；接著Servlet根據(jù)需求執(zhí)行數(shù)據(jù)庫的增刪改查操作，將結(jié)果數(shù)據(jù)生成特定對象；最后視圖端調(diào)用方法得到對象中的數(shù)據(jù)，采用相應(yīng)的模板引擎，完成視圖渲染。

代碼編寫測試完成后，將項目前后端代碼（包括JS、CSS資源文件、第三方庫等）打成一個War包，接下來步驟是將這個War包部署到Web容器中，然后啟動向外提供服務(wù)。用戶在瀏覽器中輸入項目網(wǎng)站域名，瀏覽器通過域名服務(wù)器解析服務(wù)器外網(wǎng)IP地址，將Http請求發(fā)送到服務(wù)器，經(jīng)過三次握手成功之后，服務(wù)器開始接收參數(shù)，執(zhí)行業(yè)務(wù)需求，通過Tcp協(xié)議開始傳輸數(shù)據(jù)，之后返回應(yīng)答給瀏覽器，瀏覽器解析并返回給用戶。

現(xiàn)在來分析上述流程，假設(shè)項目網(wǎng)站首頁中有50張圖片，從用戶視角來看，就是一次Http請求，但代碼內(nèi)部執(zhí)行其實并不是一次，因為用戶在第一次訪問的時候，本地瀏覽器中還沒有緩存，下載50張圖片，意味著瀏覽器要發(fā)出50次Http請求，服務(wù)器每次接收到請求，都需要耗費內(nèi)存完成傳輸，這時服務(wù)器承載的壓力會非常大，因為頁面中的所有請求都是由這臺服務(wù)器承載。如果業(yè)務(wù)量井噴，一萬人并發(fā)訪問網(wǎng)站，那對服務(wù)器的硬盤、內(nèi)存、網(wǎng)絡(luò)帶寬、IO接口等都是非常大的考驗，稍有不慎，就會導(dǎo)致系統(tǒng)的崩盤。

4 SPA時代

移動互聯(lián)端硬件沒有PC端豐富，傳統(tǒng)的MPA（多頁應(yīng)用）由多個獨立頁面組成，頁面間切換緩慢，需要耗費更多的資源，在移動互聯(lián)端不能流暢地運行，導(dǎo)致用戶體驗性較差，多頁應(yīng)用如圖3所示。

圖3 多頁應(yīng)用

Single Page Application（單頁應(yīng)用）由一個外殼頁面和多個頁面片段組成，在首次加載完外殼頁面后，后續(xù)多個頁面間的跳轉(zhuǎn)和切換只是頁面片段的隱藏或刪除，不需要整個頁面的切換，只是局部刷新，減輕了服務(wù)器的負(fù)擔(dān)，程序運行非常流暢，因此SPA開發(fā)技術(shù)在移動互聯(lián)端的應(yīng)用越來越廣泛，單頁應(yīng)用如圖4所示。

圖4 單頁應(yīng)用

SPA單頁應(yīng)用提供給Web端或本地端的都是Json數(shù)據(jù)格式的應(yīng)用程序接口，其工作流程如下所示：

首先啟動前端應(yīng)用，加載Html頁面、音視頻、圖片、JavaScript、CSS等基本公共資源；接著Web瀏覽器或Native端發(fā)出異步（Ajax）請求，后端處理請求，返回Json格式的數(shù)據(jù)，后端并不參與前端視圖的渲染，因此處理速度極快；最后前端將返回Json數(shù)據(jù)插入相應(yīng)邏輯模板中完成DOM數(shù)據(jù)格式的頁面渲染。

產(chǎn)品類別進(jìn)一步劃分為：機電產(chǎn)品（較輕）、機電產(chǎn)品（較重）、輕工產(chǎn)品（較輕）、輕工產(chǎn)品（較重）、農(nóng)林牧漁和其他產(chǎn)品。美方現(xiàn)已正式公布的500億美元征稅商品清單，涵蓋了1 102個稅號的產(chǎn)品，此外，在4月份提出考慮在301條款下追加1 000億美元征稅商品，將涉及更大范圍的產(chǎn)品。我國出口美國第一位的機電產(chǎn)品（輕、重）將受到重大沖擊。其中，機電較輕類涉及貿(mào)易金額970億美元，機電較重類涉及370億美元，占征稅商品1 500億美元的89%；占2017年我國對美出口機電產(chǎn)品（輕、重）的69%。

單頁應(yīng)用開發(fā)模式的優(yōu)點：（1）良好的用戶體驗，應(yīng)用程序運行流暢，頁面動態(tài)數(shù)據(jù)都是通過Ajax異步獲取，頁面只需局部刷新，不需要整個頁面的切換，后端服務(wù)器響應(yīng)迅速；（2）良好的應(yīng)用移植性，后端API接口標(biāo)準(zhǔn)化，可以無縫連接移動手機端、平面電腦、Web端，一套后端對應(yīng)多個前端，增強了代碼的復(fù)用性；（3）良好的分工協(xié)作模式，前后端代碼分離，并行開發(fā)，出現(xiàn)Bug可迅速定位，及時清除。

單頁應(yīng)用開發(fā)模式的缺點：（1）Web網(wǎng)站首次要加載大量靜態(tài)基礎(chǔ)資源，服務(wù)器和客戶機硬件資源消耗嚴(yán)重，會出現(xiàn)載入卡頓，雖然也有懶加載、服務(wù)器渲染等相關(guān)解決機制，但也不能完全避免；（2）如果應(yīng)用程序業(yè)務(wù)復(fù)雜，對前端程序員的要求較高，前端JS的代碼量將非常龐大，需要多次向服務(wù)器端發(fā)送Http請求，造成頁面渲染緩慢；（3）容易出現(xiàn)SEO問題，難以被谷歌、百度等搜索引擎收錄[4]。

5 Node.js時代

5.1 Node.js運行機制

經(jīng)典MVC架構(gòu)在同步處理的業(yè)務(wù)場合效率較高，但卻不擅長異步處理。單頁應(yīng)用SPA在一定程度上實現(xiàn)了前后端分離，但只適合移動端應(yīng)用程序開發(fā)，對Web情景下同步處理顯得有心無力，而且也存在上一節(jié)所述的各種缺點。為了解決這些問題，Node.js開始應(yīng)運而生。

為了實現(xiàn)服務(wù)器的高效運轉(zhuǎn)，Node.js引進(jìn)了非阻塞機制，非阻塞和Ajax的異步請求有異曲同工之妙，非阻塞機制下服務(wù)器接收到處理請求時會拋給一個底層子進(jìn)程，主進(jìn)程不需要同步等待處理結(jié)果，服務(wù)器主進(jìn)程會一直循環(huán)，當(dāng)?shù)讓幼舆M(jìn)程處理完請求，再通過回調(diào)函數(shù)將結(jié)果發(fā)送給服務(wù)器主進(jìn)程。Node.js與傳統(tǒng)架構(gòu)不同的是前端不僅僅只負(fù)責(zé)視圖（View）層，而且把本屬于后端控制層（Controller）也接管過來，這時后端就只專注于數(shù)據(jù)Model層和業(yè)務(wù)邏輯處理，Node.js的運行機制如圖5所示。

圖5 Node.js運行機制

從圖5可以清晰看到Node.js是處于中間層的位置，前端應(yīng)用不再直接發(fā)送Ajax異步請求給后端，而是先發(fā)送到Node.js，Node.js再發(fā)送Http請求到后端，后端返回?zé)o差別的Json數(shù)據(jù)，Node.js接收到數(shù)據(jù)后再渲染出前端視圖呈現(xiàn)給用戶。增加Node.js作為中間層，具體有以下優(yōu)點。

（1）增強可移植性；增加Node.js中間層，可以由Node.js維護(hù)各自controller層，如果前端需求發(fā)生改變，則無需再和后端溝通，自己就可以專職維護(hù)，前端專注視圖效果，后端專注于業(yè)務(wù)邏輯，前后端分工協(xié)作、各司其職。

（2）提高反應(yīng)速度：因為前后端屬于不同的語言系統(tǒng)，數(shù)據(jù)格式和數(shù)據(jù)處理存在差異，當(dāng)后端返回給前端的數(shù)據(jù)量大的時候，相應(yīng)的處理時間就會明顯增長，前端界面會有明顯的滯后效應(yīng)，這時候，采用Node.js分擔(dān)前端數(shù)據(jù)處理邏輯，可以加快前端數(shù)據(jù)處理速度，增加系統(tǒng)的靈活度和響應(yīng)度。

（3）增強系統(tǒng)性能：有時會有一種業(yè)務(wù)情景，前端請求一個頁面，可能需要調(diào)用多個后端接口才能得到這個Json數(shù)據(jù)，業(yè)務(wù)越復(fù)雜，處理速度就會越慢，特別是在移動互聯(lián)端時，硬件資源較為貧乏，性能就會越受影響，采用Node.js作為中間層，采集好后端發(fā)送的多個數(shù)據(jù)，組裝成對象或集合再統(tǒng)一發(fā)送給前端，系統(tǒng)性能將得到成倍提升。

5.2 Node.js案例

使用 Node.js 實現(xiàn)簡易登錄與注冊案例的代碼如下所示：

創(chuàng)建服務(wù)代碼如下所示：

寫完后啟動Http.js，要執(zhí)行的文件每次有更新都要重新用Node執(zhí)行一次，在瀏覽器中輸入Localhost: 3000/index會看到Index.Html頁面，如圖6所示。

圖6 登錄注冊首頁

6 總結(jié)

從古老的Html靜態(tài)網(wǎng)頁開始，到經(jīng)典的JSP+Servlet+JavaBean的MVC體系框架，再到SSH（Spring + Struts + Hibernate）和SSM（Spring + SpringMVC + Mybatis）的Java體系框架，然后是前端框架（AngularJS、VueJS、ReactJS）為主的SPA、MVP時代，目前最新的是Node.js引領(lǐng)的前后端分離的全棧時代，Web開發(fā)技術(shù)和編程架構(gòu)的發(fā)展從未停止，一直緊跟時代的步伐[5]。Ajax（SPA）應(yīng)用給前端開發(fā)帶來了一次質(zhì)的飛躍，Node.js 是第二次飛躍，未來編程模式的發(fā)展，前后端的職責(zé)會越來越清晰，開發(fā)效率會更高效。

[1] 李燕安. 基于Java的Web開發(fā)技術(shù)的探討[J]. 中國新通信, 2020, 22(8): 73–73．

[2] 李廣宏. Web平臺前端開發(fā)設(shè)計[J]. 計算機與網(wǎng)絡(luò), 2020, 46(15): 32–32.

[3] 何晶. 以SSH框架與jQuery技術(shù)為基礎(chǔ)的Java-Web開發(fā)應(yīng)用探討[J]. 計算機產(chǎn)品與流通, 2019(11): 104–105.

[4] 劉彤彤. 單頁面應(yīng)用程序(SPA)的優(yōu)缺點[EB/OL]. (2019-07-09) [2022-01-11]. https://www.cnblogs.com/belongs-to-qinghua/p/11151054.html.

[5] 阿里云開發(fā)者. Web開發(fā)的歷史發(fā)展技術(shù)演變 [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

江西省高等學(xué)校教學(xué)改革研究課題（JXJG-21-22-5）

吳新華（1975—），男，江西萍鄉(xiāng)人，講師，碩士，研究方向：計算機應(yīng)用技術(shù)。

TP311

A

2095-9249（2022）03-0069-04

〔責(zé)任編校：陳楠楠〕