DOM的渲染指的是對(duì)于瀏覽器中展現(xiàn)給用戶的DOM文檔的生成的過程。在Chrome中，這個(gè)渲染好的DOM，就是在開發(fā)者工具中元素這個(gè)tab中，遞歸的展開之后得到的整個(gè)文檔。

?

DOM渲染的演化過程，大致可以分為可以分為三個(gè)階段：

?

純后端渲染

?

純前端渲染

?

服務(wù)端的js渲染結(jié)合前端渲染

?

下面我們分階段來做一下說明。

?

第一個(gè)階段是純后端渲染。采用這樣的渲染方式，就是每一個(gè)頁面中，在Chrome中展開得到的DOM，和服務(wù)器返回的DOM是基本一致的（可以通過查看網(wǎng)頁源代碼來得到服務(wù)器返回的DOM）。當(dāng)然，這里是“基本”一致，因?yàn)閷?shí)際操作中，頁面或多或少還是會(huì)帶有一些js代碼，并且在瀏覽器端中運(yùn)行這些js代碼來對(duì)DOM進(jìn)行的渲染，不過這一部分js代碼并不影響DOM的主體是由服務(wù)端返回的。純后端的DOM渲染，DOM樹的生成完全是在后端服務(wù)器中完成的，相當(dāng)于后端服務(wù)器的程序會(huì)把各種的數(shù)據(jù)拼成一個(gè)DOM樹，并轉(zhuǎn)換成一個(gè)字節(jié)流作為HTTP Response的body返回給瀏覽器。這種渲染的邏輯如下圖所示：

純后端的渲染的整體的結(jié)構(gòu)是最簡(jiǎn)單的，把全部的邏輯都交給后端來完成。這樣的優(yōu)點(diǎn)在于返回的HTTP Response是包含著全部頁面內(nèi)容的，相對(duì)來說頁面的主體DOM結(jié)構(gòu)都會(huì)在這個(gè)響應(yīng)中返回，可以讓用戶更快的看到頁面的主體部分，而這樣的響應(yīng)對(duì)于瀏覽器爬蟲來說也更有好，對(duì)SEO更有幫助。但是也正是由于這樣的簡(jiǎn)單的結(jié)構(gòu)，如果返回的DOM比較復(fù)雜，尤其是帶有復(fù)雜的交互的頁面，開發(fā)的難度就會(huì)非常大，或者說純后端渲染很難帶來良好的交互體驗(yàn)。當(dāng)然，在純后端DOM渲染中，地址的路由完全是由后端控制的（最簡(jiǎn)單的例子就是有后端直接把服務(wù)器上的靜態(tài)目錄結(jié)構(gòu)返回回來），每一次路由發(fā)生變化，都會(huì)引起頁面的刷新，這個(gè)使用體驗(yàn)其實(shí)也不是很好。

?

我們現(xiàn)在一般提到的“頁面”這個(gè)概念或者說法，就是在純后端DOM渲染的階段中形成并且延續(xù)下來的。在純后端的渲染中，可以很清晰的把一次DOM類型的HTTP請(qǐng)求作為一個(gè)頁面。但是在后兩種方式中，這個(gè)分界就遠(yuǎn)遠(yuǎn)么有這么清晰了，前端框架只是實(shí)現(xiàn)了類似的“頁面”的效果，但是就不一定和某個(gè)具體的請(qǐng)求機(jī)制直接掛鉤了。

?

第二個(gè)階段就是純前端渲染，很大程度上，純前端渲染可以解決純后端渲染中出現(xiàn)的各種體驗(yàn)問題。如下圖所示，純前端渲染把DOM生成的主題邏輯都放在了前端，這時(shí)后端只會(huì)返回一個(gè)框架的DOM結(jié)構(gòu)，比如只帶一個(gè)容器元素的的DOM，然后由js代碼把頁面的主題渲染到這個(gè)容器元素中。

在純前端DOM渲染中，服務(wù)器主要是以API的形式返回各種數(shù)據(jù)，然后由js把數(shù)據(jù)重新組合成DOM。的大家耳熟能詳?shù)母鞣N前端框架，比如Vue.js，React.js，angularjs等等，主要都是以這種方式完成了對(duì)于DOM的渲染。相對(duì)于純后端的DOM渲染方式，純前端DOM渲染的方式形成了一個(gè)天然的表現(xiàn)層和數(shù)據(jù)層的分界，js代碼負(fù)責(zé)交互和展現(xiàn)，后端以API形式提供純粹的數(shù)據(jù)。這種改變帶來的最大的好處就是，交互的部分可以脫離數(shù)據(jù)接口獨(dú)立的開發(fā)和調(diào)試，讓站點(diǎn)的交互能力大幅的提升，并且很好的解耦了表現(xiàn)層和數(shù)據(jù)層的代碼邏輯。

?

在純前端DOM渲染中，第一屏的DOM渲染，依賴于大量的前端代碼的加載和一次到多次的API請(qǐng)求。請(qǐng)求本身處理的時(shí)間，加上http請(qǐng)求的round trip的時(shí)間，這就會(huì)讓第一屏的渲染之前有很多工作要做，并且每一步工作都帶著從用戶的網(wǎng)絡(luò)到服務(wù)器網(wǎng)絡(luò)的訪問延遲，如果用戶到服務(wù)器的物理距離很遠(yuǎn)，這個(gè)延遲累加起來就會(huì)很大。很多優(yōu)化的方法，比如控制max-age等緩存時(shí)間，通過MANIFEST來儲(chǔ)存靜態(tài)資源等，都是針對(duì)用戶第二次加載第一屏來進(jìn)行的，無法解決用戶第一次加載第一屏的問題。

?

下面我們就看一下第三個(gè)階段，服務(wù)端的js渲染結(jié)合前端渲染，如下圖所示

可以說，這里是把純前端渲染劃分成了兩個(gè)渲染的子階段。第一個(gè)子階段即SSR初步渲染完成DOM，也就是把我們上面說到的第一屏先在服務(wù)器端通過js渲染出來，這個(gè)子階段在服務(wù)器端增加了一個(gè)js渲染層的服務(wù)（比如next.js和nuxt.js），這一層相當(dāng)于把原來要在客戶網(wǎng)絡(luò)與服務(wù)器網(wǎng)絡(luò)之間進(jìn)行的大量通信轉(zhuǎn)移到了由服務(wù)器網(wǎng)絡(luò)與服務(wù)器網(wǎng)絡(luò)之間進(jìn)行，大大縮減了網(wǎng)絡(luò)通信消耗的時(shí)間。第二個(gè)子階段就是前段渲染的階段，主要是解決首屏加載之后用用戶交互問題，這些都和純前端渲染時(shí)完全一致的。

?

第三個(gè)階段，主要是把前兩個(gè)階段中，一些交給純后端DOM渲染邏輯分離的不好，但是交給純前端DOM渲染又會(huì)造成較高延遲的部分單獨(dú)分離出來形成了一獨(dú)立DOM渲染階段，保留的代碼中天然的展示層和數(shù)據(jù)層的分離，又把API請(qǐng)求的累計(jì)延遲減少了很多，從SEO角度來說渲染結(jié)果對(duì)搜索引擎也很友好。當(dāng)然，這樣的做法需要給整體的架構(gòu)增加一個(gè)獨(dú)立的單元，給開發(fā)和部署都帶來了更高復(fù)雜性。

?

本文提到的DOM渲染的三種方式，雖然第三個(gè)階段最適于提供最優(yōu)的使用體驗(yàn)，但不一定實(shí)際開發(fā)中最佳的方式，在特定的場(chǎng)景下，可以根據(jù)場(chǎng)景的特性來選擇最簡(jiǎn)單的方法來完成。比如在網(wǎng)絡(luò)延遲很低的情況下（內(nèi)部網(wǎng)絡(luò)），就沒有必要選取服務(wù)器端js渲染的方式，純前端渲染就可以帶來低延遲的使用體驗(yàn)。