[[327793]]

當(dāng)前幾種常見(jiàn)的前端性能優(yōu)化方案仍然不可避免地會(huì)存在一些缺點(diǎn)。本文在 ESI (Edge Side Include) 的基礎(chǔ)上，提出了一種新的優(yōu)化思路：邊緣流式渲染方案(ESR)，即借助 CDN 的邊緣計(jì)算能力，將靜態(tài)內(nèi)容與動(dòng)態(tài)內(nèi)容以流式的方式，先后返回給用戶。

背景

對(duì)于 web 頁(yè)面來(lái)說(shuō)，首跳場(chǎng)景(例如 SEO、付費(fèi)引流)的性能普遍比二跳場(chǎng)景下要差。原因有多種，主要是首跳用戶在連接復(fù)用，和本地資源緩存利用方面，有很大的劣勢(shì)。首跳場(chǎng)景下，很多在端上的優(yōu)化手段(預(yù)加載，預(yù)執(zhí)行，預(yù)渲染等)無(wú)法實(shí)施。

在客戶端緩存能力無(wú)法利用的情況下，利用 cdn 距離用戶近的特性，可以結(jié)合緩存做一些性能優(yōu)化。

思路

思路 1：SSR

為了性能優(yōu)化考慮，我們一般都會(huì)通過(guò)服務(wù)端渲染(SSR) ，將首屏動(dòng)態(tài)內(nèi)容直接服務(wù)端輸出。

這種方式的優(yōu)點(diǎn)是一次 html 返回即可包含頁(yè)面主體內(nèi)容，不需要瀏覽器二次請(qǐng)求接口后再用 js 渲染。但這種方式的缺點(diǎn)也比較明顯，對(duì)于距離服務(wù)端遠(yuǎn)，或者服務(wù)端處理時(shí)間較長(zhǎng)的場(chǎng)景，用戶會(huì)看到較長(zhǎng)時(shí)間的白屏。而且即使 html 返回完成了，用戶并不會(huì)立即看到內(nèi)容，頁(yè)面還需要加載前置的 js，css 等資源后，才能看到內(nèi)容。

思路 2：CSR + CDN

為了減少白屏?xí)r間，考慮利用 CDN 的邊緣緩存能力，可以把頁(yè)面 html 直接緩存在 cdn 節(jié)點(diǎn)上。但對(duì)于大部分場(chǎng)景來(lái)說(shuō)，頁(yè)面的主體內(nèi)容都是動(dòng)態(tài)，或者個(gè)性化的，把全部 html 內(nèi)容緩存在 cdn 上對(duì)于業(yè)務(wù)影響較大，很有少場(chǎng)景能接受。那么換個(gè)思路，只把 html 靜態(tài)部分緩存在 cdn 上呢?其實(shí)這個(gè)思路也是一個(gè)很常見(jiàn)的操作，即把 html 的靜態(tài)框架部分緩存在 cdn 上，讓用戶能快速看到部分內(nèi)容，然后再在客戶端發(fā)起異步請(qǐng)求，獲取動(dòng)態(tài)內(nèi)容并且渲染(CSR)。CSR + CDN 模式下的渲染時(shí)序圖如下：

這種方式的優(yōu)點(diǎn)是頁(yè)面靜態(tài)框架緩存在 cdn 上，用戶可以快速看到頁(yè)面框架內(nèi)容，減少白屏等待焦慮。缺點(diǎn)是完整的頁(yè)面內(nèi)容需要再執(zhí)行 js ，拉取異步接口回來(lái)后再進(jìn)行渲染。最終有意義的動(dòng)態(tài)內(nèi)容展示出來(lái)的時(shí)間，比 SSR 更晚。

思路 3：ESI

CSR + CDN 的方式，很好地解決了白屏?xí)r間問(wèn)題，但帶來(lái)了動(dòng)態(tài)內(nèi)容展示的延時(shí)。之所以有這個(gè)問(wèn)題，是因?yàn)槲覀儼秧?yè)面的動(dòng)態(tài)內(nèi)容和靜態(tài)內(nèi)容分割到了兩個(gè)階段中，并且是串行的，而且串行過(guò)程中還穿插了 js 的下載和執(zhí)行。有什么辦法把動(dòng)態(tài)內(nèi)容和靜態(tài)內(nèi)容在 CDN 上整合起來(lái)呢?

ESI (Edge Side Include) 給了我們一個(gè)很好的思路啟發(fā)，ESI 最初也是 CDN 服務(wù)商們提出的規(guī)范，可通過(guò) html 標(biāo)簽里加特定的動(dòng)態(tài)標(biāo)簽，可讓頁(yè)面的靜態(tài)內(nèi)容緩存在 cdn 上，動(dòng)態(tài)內(nèi)容可以自由組裝。ESI 的渲染時(shí)序圖如下：

這個(gè)方案看起來(lái)很美好，可以把靜態(tài)的部分緩存在 CDN 上了，動(dòng)態(tài)部分在用戶請(qǐng)求時(shí)會(huì)動(dòng)態(tài)請(qǐng)求和拼接。但最關(guān)鍵的問(wèn)題在于，ESI 模式下，最終返回給用戶的首字節(jié)，還是要等到所有動(dòng)態(tài)內(nèi)容在 CDN 上都獲取和拼接完成。也就是并沒(méi)有減少白屏?xí)r間，只是減少了 CDN 和服務(wù)器之間內(nèi)容傳輸?shù)捏w積，帶來(lái)的性能優(yōu)化收益很小。最終效果上與 SSR 區(qū)別不大。

雖然 ESI 的效果不符合我們預(yù)期，但給了我們很好的思考方向。如果能把 ESI 改造成可先返回靜態(tài)內(nèi)容，動(dòng)態(tài)內(nèi)容在 CDN 節(jié)點(diǎn)獲取到之后，再返回給頁(yè)面，就可以保證白屏?xí)r間短并且動(dòng)態(tài)內(nèi)容返回不推遲。如果要實(shí)現(xiàn)類似于流式 ESI 的效果，要求在 CDN 上能對(duì)請(qǐng)求進(jìn)行細(xì)粒度的操作，以及流式的返回。CDN 節(jié)點(diǎn)上支持這么復(fù)雜的操作嗎?答案是肯定的：邊緣計(jì)算。我們可以在 CDN 上做類似于瀏覽器的 service worker 的操作，可對(duì)請(qǐng)求和響應(yīng)做靈活的編程。

基于邊緣計(jì)算的能力，我們有了一種新的選擇：邊緣流式渲染方案(ESR)。方案詳情如下。

渲染流程

方案的核心思想是，借助邊緣計(jì)算的能力，將靜態(tài)內(nèi)容與動(dòng)態(tài)內(nèi)容以流式的方式，先后返回給用戶。cdn 節(jié)點(diǎn)相比于 server，距離用戶更近，有著更短的網(wǎng)絡(luò)延時(shí)。在 cdn 節(jié)點(diǎn)上，將可緩存的頁(yè)面靜態(tài)部分，先快速返回給用戶，同時(shí)在 cdn 節(jié)點(diǎn)上發(fā)起動(dòng)態(tài)部分內(nèi)容請(qǐng)求，并將動(dòng)態(tài)內(nèi)容在靜態(tài)部分的響應(yīng)流后，繼續(xù)返回給用戶。最終頁(yè)面渲染的時(shí)序圖如下：

從上圖可以看出，cdn 邊緣節(jié)點(diǎn)可以很快地返回首字節(jié)和頁(yè)面靜態(tài)部分內(nèi)容，然后動(dòng)態(tài)內(nèi)容由 cdn 發(fā)起向 server 起并流式返回給用戶。方案有以下特點(diǎn)：

• 首屏 ttfb 會(huì)很短，靜態(tài)內(nèi)容(例如頁(yè)面 Header 、基本結(jié)構(gòu)、骨骼圖)可以很快看到。
• 動(dòng)態(tài)內(nèi)容是由 cdn 發(fā)起，相比于傳統(tǒng)瀏覽器渲染，發(fā)起時(shí)間更早，且不依賴瀏覽器上下載和執(zhí)行 js。理論上，最終 reponse 完結(jié)時(shí)間，與直接訪問(wèn)服務(wù)器獲取完整動(dòng)態(tài)頁(yè)面時(shí)間一致。
• 在靜態(tài)內(nèi)容返回后，已經(jīng)可以開(kāi)始部分 html 的解析，以及 js, css 的下載和執(zhí)行。把一些阻塞頁(yè)面的操作提前進(jìn)行，等完整動(dòng)態(tài)內(nèi)容流式返回后，可以更快地展示動(dòng)態(tài)內(nèi)容。
• 邊緣節(jié)點(diǎn)與服務(wù)端之間的網(wǎng)絡(luò)，相比于客戶端與服務(wù)端之間的網(wǎng)絡(luò)，更有優(yōu)化空間。例如通過(guò)動(dòng)態(tài)加速，以及 edge 與 server 之間的連接復(fù)用，能為動(dòng)態(tài)請(qǐng)求減少 tcp 建連和網(wǎng)絡(luò)傳輸開(kāi)銷。以做到最終動(dòng)態(tài)內(nèi)容的返回時(shí)間，比 client 直接訪問(wèn) server 更快。

demo 對(duì)比

目前在 alicdn 上對(duì)主搜頁(yè)面做了一個(gè) demo (https://edge-routine.m.alibaba.com/), 下面是在不同網(wǎng)絡(luò)(通過(guò) charles 的 network throttle 配置限速)情況下，與原始頁(yè)面的加載對(duì)比：

不限速(wifi)

限速 4G

限速 3g

5ad68981e9017.jpg" target="_blank">5ad68981e9017.jpg" width="auto" border="0" height="auto" alt="" title="">

從上面結(jié)果可以看出，在網(wǎng)速越慢的情況下，通過(guò) cdn 流式渲染的最終主要元素出來(lái)的時(shí)間比原始 ssr 的方式出來(lái)得越早。這與實(shí)際推論也符合，因?yàn)榫W(wǎng)絡(luò)越慢，靜態(tài)資源加載時(shí)間越慢，對(duì)應(yīng)的瀏覽器提前加載靜態(tài)資源帶來(lái)的效果也越明顯。另外，不管在什么網(wǎng)絡(luò)情況下，cdn 流式渲染方式的白屏?xí)r間要短很多。

整體架構(gòu)

架構(gòu)圖

5acfb3ed6f4e186a32433dbb.jpg" target="_blank">5acfb3ed6f4e186a32433dbb.jpg" width="auto" border="0" height="auto" alt="" title="">

邊緣流式渲染

1 模板

模板就是一個(gè)類似于包含 ESI 區(qū)塊的語(yǔ)法，基于模板，會(huì)將需要?jiǎng)討B(tài)請(qǐng)求的內(nèi)容提取出來(lái)，把可以靜態(tài)返回的內(nèi)容分離出來(lái)并緩存起來(lái)。所以模板本質(zhì)上定義了頁(yè)面動(dòng)態(tài)內(nèi)容和靜態(tài)內(nèi)容。

在流式渲染過(guò)程中，會(huì)從上到下解析頁(yè)面模板，如果是靜態(tài)內(nèi)容，直接返回給用戶，如果遇到動(dòng)態(tài)內(nèi)容，會(huì)執(zhí)行動(dòng)態(tài)內(nèi)容的 fetch 邏輯。整個(gè)過(guò)程中可能有靜態(tài)和動(dòng)態(tài)內(nèi)容交替出現(xiàn)。

設(shè)計(jì)有以下幾種類型的模板。

1)原始 HTML

這種模板對(duì)現(xiàn)有業(yè)務(wù)的侵入性最小，只需要在現(xiàn)有的 SSR 頁(yè)面內(nèi)容里加上一定的標(biāo)簽，即可把頁(yè)面中動(dòng)態(tài)部分申明出來(lái)：

<html> 
  <head> 
    <linkrel="stylesheet"type="text/css"href="index.css"> 
    <scriptsrc="index.js"></script><metaname="esr-version"content="0.0.1"/> 
  </head> 
  <body> 
    <div>staic content....</div> 
    <scripttype="esr/snippet/start"esr-id="111"content="SLICE"></script> 
    <div>dynamic content1....</div> 
    <scripttype="esr/snippet/end"></script> 
    <div>staic content....</div> 
    <scripttype="esr/snippet/start"esr-id="222"content="https://test.alibaba.com/snippet/222"></script> 
    <divid="222">         
      dynamic content2.... 
    </div> 
    <scripttype="esr/snippet/end"></script> 
  </body> 
</html>