Suspense 边界与流式传输优先级

Suspense 边界是流式传输粒度的基本单位。组件树中的每个 Suspense 边界都会创建一个可独立流式传输的部分——React 可以按照各自的速度解析并流式传输每个边界，彼此互不影响。

外壳由 Suspense 边界之外的所有内容组成——布局、导航、页脚以及任何可同步获得的内容。外壳首先且快速地进行流式传输，让用户立即看到页面结构，同时依赖数据的部分在后台加载。

当 React 流式传输外壳时，任何数据尚未可用的 Suspense 边界都会渲染其回退界面——通常是加载骨架屏或旋转指示器。此回退界面会包含在初始 HTML 响应中，因此用户会立即看到加载指示器，而不是空白区域。

当 Suspense 边界的数据解析完成时，React 会连同一小段内联脚本一起流式传输已解析的 HTML。该脚本会将新传输的内容从隐藏的模板元素移到 DOM 中的正确位置，在无需完整重新加载页面的情况下替换回退界面。

React 使用 HTML 模板元素模式：已解析的 Suspense 内容会流式传输到隐藏的模板中，随后脚本调用 React 的内部函数，将模板内容交换到 DOM 中的正确位置。这样无需 JS 框架即可操作 DOM 来完成替换。

嵌套的 Suspense 边界拥有独立的解析时间线。内部 Suspense 边界可能先于外部边界解析完成——React 会在内部内容就绪后立即将其流式传输，而不论外部边界是否已经解析完成。这会最大限度地提高数据加载的并行性。

有效放置 Suspense 的方式是：将缓慢且依赖数据的组件放在 Suspense 边界内，将快速、静态或可同步获得的内容放在边界外。导航栏、包含静态文本的主视觉区域和页脚应放在外部。商品列表、用户仪表板和评论信息流应放在内部。

React 会在 Suspense 边界解析完成后传输它们，而不一定按照它们在文档中出现的顺序。由于所需数据更少，页面首屏以下的部分可能比首屏部分更早解析完成。无论流式传输顺序如何，React 都能正确处理 DOM 插入。

React 18 的选择性水合会响应用户交互：如果用户点击或悬停在尚未完成水合的 Suspense 边界上，React 会优先为该边界完成水合。这可确保即使页面其他部分仍在水合，用户交互也能保持响应。

Suspense 边界越多，流式传输就越灵活，但过多的边界会增加内联替换脚本带来的开销。实用建议是：包裹完整的“区域”（首屏内容、侧边栏、首屏以下的信息流），而不是单个组件。每页使用一到三个 Suspense 边界通常是较为理想的平衡点。

在 Chrome DevTools 的网络面板中，使用“保留日志”并观察响应的流式传输：HTML 文档会以数据块逐步增长。性能面板会显示 FCP 和 LCP 标记——请比较流式与非流式构建版本，以量化改进效果。将网络限制为快速 3G，可以放大这一效果。

Suspense 边界的回退界面会在初始流式 HTML 响应中如何处理？

Suspense 边界将 React 树划分为可独立流式传输的部分。外壳（Suspense 之外）首先进行流式传输；对于仍在等待的边界，回退界面会立即显示；已解析的内容通过内联脚本替换回退界面。嵌套边界拥有独立的时间线。请在区域级别放置边界，以获得最佳流式传输粒度，并让 React 的优先级系统处理由交互驱动的水合顺序。