建站
咨詢
售后
建站咨詢
新聞中心
前端渲染的發(fā)展
其實(shí)整個(gè)前端渲染方式也是隨著前端技術(shù)的演進(jìn)而不斷革新的，大致可以分為如下歷程。
成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的嘉峪關(guān)網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
SSR(Server Side Rendering)時(shí)代(JSP、PHP)
最早期的前端渲染(2005年Ajax推出之前)都是和后端混寫的，比如JSP、PHP等寫法。但是前后端寫法雜糅在一起導(dǎo)致開發(fā)效率低下，比如改個(gè)樣式還要重新編譯一遍，并且頁面也會寫的很重。
CSR(Client Side Rendering)時(shí)代
后面有了Ajax技術(shù)之后，再加上通過CDN緩存靜態(tài)資源之后，前端SPA + CSR渲染有了飛躍式的發(fā)展，這種模式前端處理所有邏輯、內(nèi)容填充和路由，數(shù)據(jù)加載部分通過Ajax從后端獲取，因此很好的解決了前后端分工開發(fā)的問題。其具體請求時(shí)間線可參見下圖。
但是由于請求是全異步的，其一是對SEO不利，其二是需要HTML + JS處理數(shù)據(jù)拼接才能在前端完成渲染，其首屏白屏?xí)r間會較長，特別在一些低端機(jī)型上體驗(yàn)更是堪憂。
SSR時(shí)代(Node)
再后來隨著Node引領(lǐng)的全棧技術(shù)的發(fā)展，前端又回到了當(dāng)初的SSR路上，只不過這次的回歸是一次螺旋式的上升。首先是前后端全是JS語法，大部分代碼都是可復(fù)用的，其次是SEO場景友好，服務(wù)端渲染好后直接返回最終的HTML，減少了白屏等待時(shí)間，過多異步請求的導(dǎo)致的性能問題也可下放到服務(wù)端解決，也能有效避免多次的數(shù)據(jù)獲取、內(nèi)容填充，瀏覽器只綁定相關(guān)的JS邏輯、事件即可。其具體請求時(shí)間線可參見下圖。
ESR(Edge Side Rendering)時(shí)代
后面隨著邊緣計(jì)算的發(fā)展，由于CDN節(jié)點(diǎn)距離用戶更近，有更短網(wǎng)絡(luò)延時(shí)的優(yōu)勢，我們可以將頁面進(jìn)行動靜拆分，將靜態(tài)內(nèi)容緩存在CDN先快速返回給用戶，然后在CDN節(jié)點(diǎn)上發(fā)起動態(tài)內(nèi)容的請求，之后將動態(tài)內(nèi)容與靜態(tài)部分以流的形式進(jìn)行拼接，從而進(jìn)一步提高了用戶的首屏加載時(shí)間，尤其在邊緣地區(qū)或者弱網(wǎng)環(huán)境也有能擁有很好的用戶體驗(yàn)，此外還減少原先SSR服務(wù)器壓力。
原理和優(yōu)勢
剛才也提到了，ESR就是借助邊緣計(jì)算能力，將返回的內(nèi)容進(jìn)行靜態(tài)+動態(tài)部分拆分并以流的形式返回。靜態(tài)部分依托CDN的緩存能力，優(yōu)先返回給用戶，隨后在CDN節(jié)點(diǎn)上繼續(xù)發(fā)起動態(tài)數(shù)據(jù)請求，并拼接在靜態(tài)部分之后，繼續(xù)流式返回。因此，其優(yōu)勢也是顯而易見：
- TTFB(Time To First Byte)很短：因?yàn)殪o態(tài)內(nèi)容在CDN緩存住了，會很快的返回給用戶。
- FP(First Paint)很短：因?yàn)樵陟o態(tài)內(nèi)容返回后，已經(jīng)可以開始HTML的解析以及 JS, CSS的下載和執(zhí)行。
- FMP(First Meaningful Paint)很短：因?yàn)閯討B(tài)內(nèi)容的請求是在CDN發(fā)起，相比于客戶端與服務(wù)端直連，請求減少了TCP建連和網(wǎng)絡(luò)傳輸開銷，而且由于動態(tài)部分是以chunked形式流式返回，F(xiàn)MP就會很短，比如搜索網(wǎng)站的第一個(gè)搜索結(jié)果就會首先繪制出來。
應(yīng)用場景舉例
場景一：將SSR服務(wù)直接部署在邊緣節(jié)點(diǎn)，中心服務(wù)提供數(shù)據(jù)接口
直接將SSR服務(wù)搬到邊緣部署，具體流程如下圖。
場景二：邊緣服務(wù)讀取緩存的靜態(tài)部分HTML，中心服務(wù)提供動態(tài)HTML
SSR服務(wù)部署在中心，邊緣流式返回HTML內(nèi)容(利用HTTP Transfer-Encoding: chunked 分塊傳輸機(jī)制)，需要分離靜態(tài)與動態(tài)部分，具體流程如下圖。
- 邊緣服務(wù)：請求靜態(tài)HTML并返回，同時(shí)請求中心SSR服務(wù)，獲取動態(tài)內(nèi)容并返回
- SSR服務(wù)：去除靜態(tài)HTML，把動態(tài)部分返回給邊緣服務(wù)
舉例
以一個(gè)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é)合如下的埋點(diǎn)統(tǒng)計(jì)，ESR的優(yōu)勢更加得以印證。
結(jié)語和展望
技術(shù)實(shí)現(xiàn)： ESR適應(yīng)于對頁面渲染性能較高的場景，借助邊緣計(jì)算在SSR的基礎(chǔ)上進(jìn)一步優(yōu)化首屏繪制的時(shí)間，降低用戶頁面的白屏等待時(shí)間；
部署方式： 目前實(shí)現(xiàn)方式主要借助于邊緣faas部署ESR服務(wù)，具有快速訪問、彈性擴(kuò)縮容、低運(yùn)維成本等優(yōu)點(diǎn)；
后期提供ER(邊緣js運(yùn)行時(shí))部署，用戶無需關(guān)心邊緣節(jié)點(diǎn)，只需專注于代碼本身，修改代碼上傳發(fā)布即可，相對于node服務(wù)，js運(yùn)行時(shí)能夠提供更高的運(yùn)行效率。
技術(shù)展望： ESR目前是在SSR基礎(chǔ)上，結(jié)合邊緣計(jì)算進(jìn)行的性能提升，將來我們將結(jié)合ER與CDN能力，在Jamstack方向進(jìn)行更多的探索，有興趣的同學(xué)敬請期待！
分享名稱：邊緣渲染是如何提高前端性能的？
當(dāng)前URL：http://www.dlmjj.cn/article/cddesgj.html
