Progressive JSON — overreacted

URL: https://overreacted.io/progressive-json/
Added At: 2025-06-01 12:57:37

TL;DR

本文提出渐进式JSON传输技术，通过广度优先分块和占位符（如$1）实现数据逐步解析，解决传统JSON需等待完整传输的延迟问题。结合内联、大纲优化策略及React的Suspense组件，允许客户端优先渲染可用部分并控制加载状态，大幅提升响应速度，适用于需避免单点延迟阻塞的场景。

Summary

本文探讨了渐进式JSON传输的创新概念，旨在解决传统JSON传输中需等待完整数据才能解析的局限性。传统JSON传输要求客户端等待整个数据加载后才能处理，导致服务器端的延迟（如数据库查询）会阻塞客户端所有操作。为此，提出以下解决方案：

1. 流式传输JSON的局限性

问题：按深度优先顺序传输JSON时，若部分内容加载慢（如comments），会导致后续所有数据延迟。
缺陷：客户端接收到不完整数据时，对象结构缺少字段（如footer缺失），难以直接使用，且无法判断哪些字段是缺失的。

2. 渐进式JSON的核心思想

广度优先传输：将数据拆分为分块，以占位符（如$1、$2）代替未完成部分，先传输根节点结构：
```
{
  header: "$1",
  post: "$2",
  footer: "$3"
}
```
逐步填充：后续分块依次填充占位符内容，客户端通过Promise异步等待数据，允许部分数据优先加载（如先显示header和footer，再填充post内容及评论）。
优势：避免单点延迟阻塞后续数据，客户端可尽早处理可用部分。

3. 优化策略

内联（Inlining）：对非延迟加载的快速字段直接内联传输（如直接写入"Welcome to my blog"而非占位符），减少分块数量。
大纲（Outlining）：消除重复数据。例如，多次出现的userInfo对象仅需传输一次，后续用占位符引用；支持循环引用的序列化。

4. 渐进式JSON与React的结合

React Server Components（RSC）：通过渐进式JSON传输，将组件树数据按广度优先顺序流式传输。例如：

function Page() {
  return (
    <html>
      <body>
        <header>欢迎</header>
        <Post />
        <footer>结束</footer>
      </body>
    </html>
  );
}

数据传输时，Post的comments可延迟加载，客户端逐步构建树结构。

控制加载状态：React通过Suspense组件定义数据加载阶段的UI状态（例如评论区域显示占位动画），解耦数据传输顺序与用户可见的渲染进度，避免界面跳跃。

5. 核心结论

传统JSON传输导致客户端必须等待完整数据，而渐进式JSON通过广度优先分块和占位符机制，允许客户端逐步处理数据，显著提升响应速度。其优化策略（内联、大纲）进一步减少冗余，支持复杂场景。结合React的Suspense，开发者可控制界面加载体验，实现数据流与UI显示的柔性解耦。该方法适用于需避免单点延迟阻塞全局的场景，鼓励更广泛的技术采用。

FilesExpand file tree

2025-06-01-progressive-json-—-overreacted.md

Latest commit

History