前端渲染的發展

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

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

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

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

CSR(Client Side Rendering)時代

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

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

SSR時代(Node)

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

ESR(Edge Side Rendering)時代

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

原理和優勢

剛才也提到了，ESR就是借助邊緣計算能力，將返回的內容進行靜態+動態部分拆分并以流的形式返回。靜態部分依托CDN的緩存能力，優先返回給用戶，隨后在CDN節點上繼續發起動態數據請求，并拼接在靜態部分之后，繼續流式返回。因此，其優勢也是顯而易見：

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

應用場景舉例

場景一：將SSR服務直接部署在邊緣節點，中心服務提供數據接口

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

場景二：邊緣服務讀取緩存的靜態部分HTML，中心服務提供動態HTML

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

• 邊緣服務：請求靜態HTML并返回，同時請求中心SSR服務，獲取動態內容并返回
• SSR服務：去除靜態HTML，把動態部分返回給邊緣服務

舉例

以一個Demo網站為例，頂部導航可以視為靜態部分緩存在邊緣CDN，下面的卡片是動態部分回源到中心服務獲取數據：

通過Demo對比，可發現ESR比SSR的有著明顯優勢，其靜態頂導首先繪出，后面動態數據也比SSR的返回要快。

此外，結合如下的埋點統計，ESR的優勢更加得以印證。

結語和展望

技術實現： ESR適應于對頁面渲染性能較高的場景，借助邊緣計算在SSR的基礎上進一步優化首屏繪制的時間，降低用戶頁面的白屏等待時間；

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

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

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