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