029-8962 3139
網站建設資訊詳細

網站建設模式演進過程

發表日期:2022-04-11  作者:云浪  瀏覽:   

我們現在基本每天都會瀏覽網站,那么網站建設其實經歷了幾個較大的演進歷程,接下來從特定視角介紹一下主要開發模式的演化過程。
靜態網站
動態網站
服務端渲染與客戶端渲染結合
前后端分離
靜態網站
早期的網站基本上都是靜態的,所謂靜態并不是頁面是靜止的,沒有動畫效果,而是把網站所有的網頁開發好之后直接上線部署到服務器上,那么這些頁面就固定放到服務器之上,如果上線時是100個頁面,那么如果不更新,該網站就是寫死的100個頁面了,這就是所謂的“靜態網站”。靜態網站的內容主要包括HTML、CSS、javascript代碼,圖片、字體文件、音頻、視頻等資源。其交互流程如下圖所示:

1.png

靜態網頁訪問流程
客戶端向服務器發送請求
Nginx根據請求路徑獲取網頁內容
將頁面內容傳輸給客戶端
客戶端展示網頁效果
靜態網站有明顯的局限性:
如果需要更新頁面的內容,比如說,每個頁面添加一條廣告信息,會很麻煩,需要一個一個頁面進行修改,工作量比較大,尤其是大規模的網站,這種方式基本不可行。
無法實現交互效果,比如登錄,發表評論、點贊等功能。
動態網站
鑒于靜態網站的問題,后來就誕生了動態網站技術、比如PHP、JSP、ASP等。所謂的動態網站也不是頁面有動畫,而是指頁面是通過技術手段動態生成的。比如銀行的賬單頁面,張三和李四會看到不同的數據,但是在服務器中僅僅一個動態頁面就夠了,當張三和李四分別訪問該動態頁面時,會分別動態生成兩個不同的HTML頁面,動態性體現在HTML的動態生成上。

2.png

以PHP動態網站技術為例,具體流程如下
客戶端訪問服務器的php頁面
Nginx根據請求路徑找到php文件
Nginx把php文件交給php運行環境進行編譯,轉換成靜態HTML頁面,然后交給Nginx
Nginx把動態生成的HTML頁面返回給客戶端
瀏覽器展示頁面效果
服務端渲染與客戶端渲染結合
無論是靜態網站還是動態網站,當瀏覽器發送請求之后,如果服務器返回內容的時間比較慢(可能是網絡問題),那么瀏覽器只能等待,處于阻塞狀態,呈現出的效果就是長時間白屏,在當今快節奏的生活模式下,坐高鐵、吃快餐......這些習慣已根深蒂固,當一個頁面3秒左右不出來,我們甚至都不愿意去等。
所以為了改善用戶體驗,2005誕生了一種技術Ajax,他可以使瀏覽器在不阻塞的情況下,向服務器發送請求,用戶是無感知的,當服務器返回數據后,頁面再根據數據進行局部更新。有了Ajax這種技術,再配合jQuery,基本上就成了前端的主要開發模式,這也是此后jQuery近10年的輝煌時期(當然現在有了更好的選擇—Vue/React/Augular)。
接下來需要著重解釋一個概念:渲染。所謂的渲染就是把數據填充到HTML標簽的過程。
還是以查看賬單的場景為例,賬單數據一般都是存儲在數據庫中,那么php代碼會從數據庫中查詢出數據然后拼接到HTML標簽代碼中,這個過程發生在服務器,所以稱之為服務端渲染。流程如下圖所示:

3.png

客戶端請求得到服務端渲染的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操作中解脫出來,而僅僅需要關注數據處理和業務操作,從而大大簡化了前端的代碼實現。此外更重要的一點就是,前后端從項目結構和開發流程上徹底分離,讓前端和后端可以更加專注(其實都可以少掉點兒頭發),而之前很多后端基本都是做全棧的工作。
在這種前后端分離的開發模式下,具體流程如下

4.png

在這種前后端分離的模式下,前后與后端的對接僅僅需要約定一種接口(接口細節包括請求地址,請求方式、請求參數,后端返回的結果),那么這種接口是與技術無關的,所以前后的技術選型可以自由設計,前端可以選擇React、Vue等都可以,后端可以選擇java、PHP、python等亦無所謂。
對于前端來說,一個很大的變化,就是前端項目可以單獨實現工程化,可以獨立設計、開發、測試、部署上線以及運維等。所以這套流程靠后端已經不太容易兼職搞定了,所以前端工程師這個崗位才有了一席之地,并且可以與后端工程師分庭抗禮。

以上便是《網站建設模式演進過程》的全部內容,網站建設好后不僅需要持續的內容維護,還需要做一定的SEO優化,希望我們的內容能幫助到網站制作的朋友。

首页-汤姆高清影院官网-首页汤姆高清影院官网入口-汤姆影视