前端渲染的發(fā)展

在講ESR(Edge Side Rendering，邊緣渲染)如何提速渲染之前，我們有必要先了解一下前端渲染的發(fā)展歷史以及前端各項性能指標(biāo)優(yōu)化是如何被提上議程的，之后我們再反觀ESR的出現(xiàn)就會發(fā)現(xiàn)也是水到渠成。

其實整個前端渲染方式也是隨著前端技術(shù)的演進(jìn)而不斷革新的，大致可以分為如下歷程。

SSR(Server Side Rendering)時代(JSP、PHP)

最早期的前端渲染(2005年Ajax推出之前)都是和后端混寫的，比如JSP、PHP等寫法。但是前后端寫法雜糅在一起導(dǎo)致開發(fā)效率低下，比如改個樣式還要重新編譯一遍，并且頁面也會寫的很重。

CSR(Client Side Rendering)時代

后面有了Ajax技術(shù)之后，再加上通過CDN緩存靜態(tài)資源之后，前端SPA + CSR渲染有了飛躍式的發(fā)展，這種模式前端處理所有邏輯、內(nèi)容填充和路由，數(shù)據(jù)加載部分通過Ajax從后端獲取，因此很好的解決了前后端分工開發(fā)的問題。其具體請求時間線可參見下圖。

但是由于請求是全異步的，其一是對SEO不利，其二是需要HTML + JS處理數(shù)據(jù)拼接才能在前端完成渲染，其首屏白屏?xí)r間會較長，特別在一些低端機型上體驗更是堪憂。

SSR時代(Node)

再后來隨著Node引領(lǐng)的全棧技術(shù)的發(fā)展，前端又回到了當(dāng)初的SSR路上，只不過這次的回歸是一次螺旋式的上升。首先是前后端全是JS語法，大部分代碼都是可復(fù)用的，其次是SEO場景友好，服務(wù)端渲染好后直接返回最終的HTML，減少了白屏等待時間，過多異步請求的導(dǎo)致的性能問題也可下放到服務(wù)端解決，也能有效避免多次的數(shù)據(jù)獲取、內(nèi)容填充，瀏覽器只綁定相關(guān)的JS邏輯、事件即可。其具體請求時間線可參見下圖。

ESR(Edge Side Rendering)時代

后面隨著邊緣計算的發(fā)展，由于CDN節(jié)點距離用戶更近，有更短網(wǎng)絡(luò)延時的優(yōu)勢，我們可以將頁面進(jìn)行動靜拆分，將靜態(tài)內(nèi)容緩存在CDN先快速返回給用戶，然后在CDN節(jié)點上發(fā)起動態(tài)內(nèi)容的請求，之后將動態(tài)內(nèi)容與靜態(tài)部分以流的形式進(jìn)行拼接，從而進(jìn)一步提高了用戶的首屏加載時間，尤其在邊緣地區(qū)或者弱網(wǎng)環(huán)境也有能擁有很好的用戶體驗，此外還減少原先SSR服務(wù)器壓力。

原理和優(yōu)勢

剛才也提到了，ESR就是借助邊緣計算能力，將返回的內(nèi)容進(jìn)行靜態(tài)+動態(tài)部分拆分并以流的形式返回。靜態(tài)部分依托CDN的緩存能力，優(yōu)先返回給用戶，隨后在CDN節(jié)點上繼續(xù)發(fā)起動態(tài)數(shù)據(jù)請求，并拼接在靜態(tài)部分之后，繼續(xù)流式返回。因此，其優(yōu)勢也是顯而易見：

• TTFB(Time To First Byte)很短：因為靜態(tài)內(nèi)容在CDN緩存住了，會很快的返回給用戶。
• FP(First Paint)很短：因為在靜態(tài)內(nèi)容返回后，已經(jīng)可以開始HTML的解析以及 JS, CSS的下載和執(zhí)行。
• FMP(First Meaningful Paint)很短：因為動態(tài)內(nèi)容的請求是在CDN發(fā)起，相比于客戶端與服務(wù)端直連，請求減少了TCP建連和網(wǎng)絡(luò)傳輸開銷，而且由于動態(tài)部分是以chunked形式流式返回，F(xiàn)MP就會很短，比如搜索網(wǎng)站的第一個搜索結(jié)果就會首先繪制出來。

應(yīng)用場景舉例

場景一：將SSR服務(wù)直接部署在邊緣節(jié)點，中心服務(wù)提供數(shù)據(jù)接口

直接將SSR服務(wù)搬到邊緣部署，具體流程如下圖。

場景二：邊緣服務(wù)讀取緩存的靜態(tài)部分HTML，中心服務(wù)提供動態(tài)HTML

SSR服務(wù)部署在中心，邊緣流式返回HTML內(nèi)容(利用HTTP Transfer-Encoding: chunked 分塊傳輸機制)，需要分離靜態(tài)與動態(tài)部分，具體流程如下圖。

• 邊緣服務(wù)：請求靜態(tài)HTML并返回，同時請求中心SSR服務(wù)，獲取動態(tài)內(nèi)容并返回
• SSR服務(wù)：去除靜態(tài)HTML，把動態(tài)部分返回給邊緣服務(wù)

舉例

以一個Demo網(wǎng)站為例，頂部導(dǎo)航可以視為靜態(tài)部分緩存在邊緣CDN，下面的卡片是動態(tài)部分回源到中心服務(wù)獲取數(shù)據(jù)：

通過Demo對比，可發(fā)現(xiàn)ESR比SSR的有著明顯優(yōu)勢，其靜態(tài)頂導(dǎo)首先繪出，后面動態(tài)數(shù)據(jù)也比SSR的返回要快。

此外，結(jié)合如下的埋點統(tǒng)計，ESR的優(yōu)勢更加得以印證。

結(jié)語和展望

技術(shù)實現(xiàn)： ESR適應(yīng)于對頁面渲染性能較高的場景，借助邊緣計算在SSR的基礎(chǔ)上進(jìn)一步優(yōu)化首屏繪制的時間，降低用戶頁面的白屏等待時間；

部署方式： 目前實現(xiàn)方式主要借助于邊緣faas部署ESR服務(wù)，具有快速訪問、彈性擴縮容、低運維成本等優(yōu)點；

后期提供ER(邊緣js運行時)部署，用戶無需關(guān)心邊緣節(jié)點，只需專注于代碼本身，修改代碼上傳發(fā)布即可，相對于node服務(wù)，js運行時能夠提供更高的運行效率。

技術(shù)展望： ESR目前是在SSR基礎(chǔ)上，結(jié)合邊緣計算進(jìn)行的性能提升，將來我們將結(jié)合ER與CDN能力，在Jamstack方向進(jìn)行更多的探索，有興趣的同學(xué)敬請期待！