Airbnb 引入 HTTP 流式传输以提升页面加载性能

Airbnb 通过引入 HTTP 流式传输技术，显著提升了其网站的页面加载性能。该技术使得每个测试页面（包括主页）的首次内容渲染时间（FCP）减少了约 100 毫秒，并有效减少了慢速后端查询对加载时间的影响。

背景与问题

Airbnb 一直在寻求如何更快地向用户呈现内容的方法。他们发现，传统的方式是在页面完全渲染后才发送页面主体内容，这种方式在页面内容依赖于后端查询时，用户体验较差。此外，网页通常需要浏览器下载许多额外的资源（如 CSS 和外部 JavaScript 文件），这些依赖关系会导致资源请求的级联效应，进一步影响加载速度。

解决方案：早期刷新技术

为了解决上述问题，Airbnb 采用了早期刷新（Early Flush）技术。该技术将 HTML 文档分为两部分，并使用分块传输编码（Chunked Transfer Encoding）分别发送。浏览器在接收到包含 HTML 文档开头的初始块后，即可开始下载外部资源，而不必等待整个 HTML 文档的传输。尽管早期刷新技术并不新鲜，但由于其需要渲染和发送不完整的 HTML 片段，因此并未被广泛使用。

Airbnb 使用基于 Express 的 NodeJS 服务器来渲染网页，并采用 React 作为前端框架。为了实现早期刷新，他们需要将原本用于渲染整个 HTML 文档的单个 React 组件拆分为三个独立的组件。

进一步优化：延迟数据块

早期刷新虽然优化了 CSS 和 JavaScript 资源的网络加载顺序，但并未解决页面主体渲染的延迟问题。为此，Airbnb 引入了第三个块，称为延迟数据块，其中包含页面所需的数据。他们使用 MutationObserver 来检测延迟数据何时加载，并将数据注入应用程序的网络数据存储中，从而避免了额外的网络请求。

技术挑战与解决方案

在实施 HTTP 流式传输的过程中，Airbnb 的团队还面临了一些技术挑战。他们禁用了 NGINX 中的响应缓冲和 HAProxy 负载均衡器中的 Nagle 算法，以确保分块响应能够无损地到达浏览器。

总结与展望

Airbnb 的软件工程师 Victor Lin 总结道，尽管在适应现有 React 应用程序以支持流式传输的过程中遇到了一些挑战，但他们的团队发现这一过程是可行且稳健的。他们还对前端生态系统逐渐向流式传输优先的趋势感到兴奋，例如 GraphQL 中的 @defer 和 @stream 指令，以及 Next.js 中的流式 SSR。

通过引入 HTTP 流式传输，Airbnb 不仅提升了页面加载性能，还为未来的技术发展奠定了基础。