指南 · 03
性能
Web 组件的开销（基于本次构建的实测），以及如何复现这些数据。
测量结果
于 2026-09-28 使用 Chrome 153.0.8010.52 (headless, Playwright) 测量。每个浏览器数据取三次运行中的最大值。
| 项目 | 测量方式 | 结果 |
|---|---|---|
| 包体积 | 整个 Web 入口（全部 16 个导出）用 esbuild 打包并压缩，React 作为外部依赖，gzip 级别 9 | 28.0 KB（压缩后 84.3 KB） |
| 单个组件 | 只导入 MotionNumber，打包方式相同 | 18.6 KB |
| JS 帧回调 | MotionNumber、MotionHeight 和 MotionHighlight 同时变化的 1.2 秒内，页面上 requestAnimationFrame 的调用次数（12 个动画在运行） | 0 |
| 每次变化的 React 提交 | MotionNumber 外层 Profiler 在 10 次值变化中的提交次数，每次都等待动画结束 | 10 次变化中 10 次 |
| 流式输出 | MotionStream 显示一次性到达的 3000 个字符期间（约 4081 ms）Profiler 的提交次数 | 11 |
| 打断 | 间隔 5 ms 输入 200 个新值后暂停：页面上残留的动画数量，以及最终文本是否准确 | 残留 0 个，文本准确 |
2026-09-28 · @kkwaenggwari/animated-chorus@0.1.0 · Chrome 153.0.8010.52 (headless, Playwright) · Windows_NT 10.0.22631 · Intel(R) Core(TM) i7-14700K
为什么快
四个设计选择让开销保持在低水平。
- Web 上没有动画库：动效交给浏览器的 Web Animations API，弹簧经解析采样。
- 不会每帧触发 React 渲染：组件在数据变化时渲染，而不是在运动时。
- 流式文本直接追加到页面中，每秒只合并进 React state 几次。
- 每个组件都独立工作：没有会重新渲染整棵树的 Provider，也没有全局 store。
局限
MotionStream 在显示文本时会使用动画帧循环，它是唯一需要每帧工作的组件。在 React Native 上，宽度和高度的变化属于布局，所以运行在 JS 驱动上。测量结果只代表一台机器和一个浏览器，你的数据会有所不同。
复现
这些数据来自网站仓库中的一个脚本。它会打包这个包，以无窗口方式打开已安装的 Chrome，把每个场景各运行三次，并写出本页读取的结果。
node scripts/measure-chorus.mjs