Airbnb 如何透過 HTTP Streaming 優化前端效能

2023年12月29日

💎 加入 E+ 成長計畫 與超過 250+ 位軟體工程師一起在社群中成長,並且獲得更深入、系統性軟體工程內容

本篇最早收錄於《ExplainThis 全端雙週報》第 4 期

在 ChatGPT 問世後,你可能有注意到,ChatGPT 的回應不是一次全部回完,而是一個字一個字回。這種形式是所謂的串流 (streaming)。用串流的方式,最直接的好處就是能提升效能。

試想,假如 ChatGPT 要等一長串回覆全都產生好後再一次傳給前端,可能每次都要先等個 5 秒,然後使用者才能一次收到所有回覆。但假如用串流的形式,只要有一句話就能傳,使用者就可以一直收到回覆,在體驗上會比較好。

串流的形式不只可以用在聊天機器人的回覆上,也可以用來幫助網頁加載。Airbnb 先前在官方技術部落格發表《Improving Performance with HTTP Streaming》一文探討他們怎麼做到。這邊蠻推薦大家可以去 Airbnb 官網,然後開啟開發者工具,到 Network 區塊中調成 Slow 3G,就會看到 Airbnb 官網不是一次整個渲染,而是一個區塊一個區塊,只要資料加載完就渲染該區塊。

他們具體的作法是透過 Early Flush 這個方法,把在伺服器端渲染好的 HTML 分成三個區塊,第一個區塊是包含字體、CSS、JavaScript 等,因為這些可以比較快被處理;第二區塊是剩下的 HTML 內容;第三區塊則是需要向後端索取的資料的部分。

特別注意,為了加快速度,Airbnb 平行做伺服器端絢染 (SSR) 與客戶端的資料索取 (Client side data fetch)。在拿到前兩個區塊後,透過瀏覽器的 MutationObserver 去觀察 DOM 的變化,然後當第三區塊索取的資料好了後再塞進去。透過這個方式,幾乎每個頁面的 FMP 都提升 100 毫秒。

非常推薦大家完整讀完該文章,會更清楚如何做這塊優化。不過假如你在的公司不像 Airbnb 有專門的效能優化團隊,也不用擔心。現在前端框架都有幫忙處理這塊。舉例來說,React 18 就有支援 streaming HTML,假如搭配 Next.js 基本上是開箱即用 🙂

🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們