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

本篇最早收錄於《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 基本上是開箱即用 🙂