Airbnb 如何透过 HTTP Streaming 优化前端效能

2023年12月29日

💎 加入 E+ 成長計畫 與超過 400+ 位軟體工程師一同在社群中成長,並且獲得更多的軟體工程學習資源

在 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 上追蹤我們