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 基本上是开箱即用 🙂