我們現(xiàn)在基本每天都會瀏覽網(wǎng)站，那么網(wǎng)站建設(shè)其實經(jīng)歷了幾個較大的演進(jìn)歷程，接下來從特定視角介紹一下主要開發(fā)模式的演化過程。
靜態(tài)網(wǎng)站
動態(tài)網(wǎng)站
服務(wù)端渲染與客戶端渲染結(jié)合
前后端分離
靜態(tài)網(wǎng)站
早期的網(wǎng)站基本上都是靜態(tài)的，所謂靜態(tài)并不是頁面是靜止的，沒有動畫效果，而是把網(wǎng)站所有的網(wǎng)頁開發(fā)好之后直接上線部署到服務(wù)器上，那么這些頁面就固定放到服務(wù)器之上，如果上線時是100個頁面，那么如果不更新，該網(wǎng)站就是寫死的100個頁面了，這就是所謂的“靜態(tài)網(wǎng)站”。靜態(tài)網(wǎng)站的內(nèi)容主要包括HTML、CSS、javascript代碼，圖片、字體文件、音頻、視頻等資源。其交互流程如下圖所示：
靜態(tài)網(wǎng)頁訪問流程
客戶端向服務(wù)器發(fā)送請求
Nginx根據(jù)請求路徑獲取網(wǎng)頁內(nèi)容
將頁面內(nèi)容傳輸給客戶端
客戶端展示網(wǎng)頁效果
靜態(tài)網(wǎng)站有明顯的局限性：
如果需要更新頁面的內(nèi)容，比如說，每個頁面添加一條廣告信息，會很麻煩，需要一個一個頁面進(jìn)行修改，工作量比較大，尤其是大規(guī)模的網(wǎng)站，這種方式基本不可行。
無法實現(xiàn)交互效果，比如登錄，發(fā)表評論、點贊等功能。
動態(tài)網(wǎng)站
鑒于靜態(tài)網(wǎng)站的問題，后來就誕生了動態(tài)網(wǎng)站技術(shù)、比如PHP、JSP、ASP等。所謂的動態(tài)網(wǎng)站也不是頁面有動畫，而是指頁面是通過技術(shù)手段動態(tài)生成的。比如銀行的賬單頁面，張三和李四會看到不同的數(shù)據(jù)，但是在服務(wù)器中僅僅一個動態(tài)頁面就夠了，當(dāng)張三和李四分別訪問該動態(tài)頁面時，會分別動態(tài)生成兩個不同的HTML頁面，動態(tài)性體現(xiàn)在HTML的動態(tài)生成上。
以PHP動態(tài)網(wǎng)站技術(shù)為例，具體流程如下
客戶端訪問服務(wù)器的php頁面
Nginx根據(jù)請求路徑找到php文件
Nginx把php文件交給php運行環(huán)境進(jìn)行編譯，轉(zhuǎn)換成靜態(tài)HTML頁面，然后交給Nginx
Nginx把動態(tài)生成的HTML頁面返回給客戶端
瀏覽器展示頁面效果
服務(wù)端渲染與客戶端渲染結(jié)合
無論是靜態(tài)網(wǎng)站還是動態(tài)網(wǎng)站，當(dāng)瀏覽器發(fā)送請求之后，如果服務(wù)器返回內(nèi)容的時間比較慢（可能是網(wǎng)絡(luò)問題），那么瀏覽器只能等待，處于阻塞狀態(tài)，呈現(xiàn)出的效果就是長時間白屏，在當(dāng)今快節(jié)奏的生活模式下，坐高鐵、吃快餐......這些習(xí)慣已根深蒂固，當(dāng)一個頁面3秒左右不出來，我們甚至都不愿意去等。
所以為了改善用戶體驗，2005誕生了一種技術(shù)Ajax，他可以使瀏覽器在不阻塞的情況下，向服務(wù)器發(fā)送請求，用戶是無感知的，當(dāng)服務(wù)器返回數(shù)據(jù)后，頁面再根據(jù)數(shù)據(jù)進(jìn)行局部更新。有了Ajax這種技術(shù)，再配合jQuery，基本上就成了前端的主要開發(fā)模式，這也是此后jQuery近10年的輝煌時期（當(dāng)然現(xiàn)在有了更好的選擇—Vue/React/Augular）。
接下來需要著重解釋一個概念：渲染。所謂的渲染就是把數(shù)據(jù)填充到HTML標(biāo)簽的過程。
還是以查看賬單的場景為例，賬單數(shù)據(jù)一般都是存儲在數(shù)據(jù)庫中，那么php代碼會從數(shù)據(jù)庫中查詢出數(shù)據(jù)然后拼接到HTML標(biāo)簽代碼中，這個過程發(fā)生在服務(wù)器，所以稱之為服務(wù)端渲染。流程如下圖所示：
客戶端請求得到服務(wù)端渲染的HTML頁面之后先進(jìn)行展示，如果用戶觸發(fā)操作要更新頁面，還可以通過Ajax請求獲取后端返回的數(shù)據(jù)（當(dāng)前基本上是JSON格式的數(shù)據(jù)），從而實現(xiàn)頁面的局部更新。比較典型的場景有觸底加載更多列表內(nèi)容的效果，當(dāng)頁面滾動到底部的時候，頁面上面的內(nèi)容不會消失，而是在底部顯示Ajax請求的一頁新的數(shù)據(jù)，這種效果體驗非常好。那么服務(wù)器如果僅僅返回JSON數(shù)據(jù)，頁面端會通過javascript代碼把數(shù)據(jù)填充到HTML標(biāo)簽中進(jìn)行顯示，這種數(shù)據(jù)填充標(biāo)簽的過程發(fā)生在瀏覽器，即所謂的客戶端渲染。
jQuery時代基本上是服務(wù)端渲染和客戶端渲染結(jié)合使用，一般主頁面采用服務(wù)端渲染，主頁展示之后，后續(xù)頁面局部更新操作一般基于Ajax，采用客戶端渲染方式，從而提升交互體驗。
前后端分離
隨著互聯(lián)網(wǎng)的持續(xù)繁榮，客戶端基于Ajax渲染的業(yè)務(wù)場景越來越復(fù)雜，那么把JSON數(shù)據(jù)拼接到HTML標(biāo)簽中的代碼實現(xiàn)越來越繁瑣，代碼變得難以維護(hù)。雖然出現(xiàn)了像art-template之類的前端模版引擎，從某種程度上有所改善，但是像事件處理還是需要自己去操作，并未從根本上解決問題。
好在2009年一種技術(shù)的誕生奠定現(xiàn)今前端更加繁榮的開發(fā)模式：Node.js
Node.js可以讓javascript運行在非瀏覽器環(huán)境，并且提供了對接底層操作系統(tǒng)API的能力。經(jīng)過十多年的發(fā)展，這個生態(tài)已經(jīng)非常繁榮。新興的前端框架基本都是構(gòu)建在Node.js生態(tài)之上，包括目前比較流行的AngularJS、Vue、React。
新興前端框架，比如以React為例，基本上顛覆了前端代碼的開發(fā)模式，將程序員從繁瑣的DOM操作中解脫出來，而僅僅需要關(guān)注數(shù)據(jù)處理和業(yè)務(wù)操作，從而大大簡化了前端的代碼實現(xiàn)。此外更重要的一點就是，前后端從項目結(jié)構(gòu)和開發(fā)流程上徹底分離，讓前端和后端可以更加專注（其實都可以少掉點兒頭發(fā)），而之前很多后端基本都是做全棧的工作。
在這種前后端分離的開發(fā)模式下，具體流程如下
在這種前后端分離的模式下，前后與后端的對接僅僅需要約定一種接口（接口細(xì)節(jié)包括請求地址，請求方式、請求參數(shù)，后端返回的結(jié)果），那么這種接口是與技術(shù)無關(guān)的，所以前后的技術(shù)選型可以自由設(shè)計，前端可以選擇React、Vue等都可以，后端可以選擇java、PHP、python等亦無所謂。
對于前端來說，一個很大的變化，就是前端項目可以單獨實現(xiàn)工程化，可以獨立設(shè)計、開發(fā)、測試、部署上線以及運維等。所以這套流程靠后端已經(jīng)不太容易兼職搞定了，所以前端工程師這個崗位才有了一席之地，并且可以與后端工程師分庭抗禮。
