前端渲染的發(fā)展

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

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

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

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

CSR(Client Side Rendering)時(shí)代

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

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

SSR時(shí)代(Node)

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

ESR(Edge Side Rendering)時(shí)代

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

原理和優(yōu)勢(shì)

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

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

應(yīng)用場(chǎng)景舉例

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

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

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

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

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

舉例

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

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

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

結(jié)語(yǔ)和展望

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

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

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

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