最近在做一个终端 UI 的 flex 布局引擎,叫 Pilates 。纯 TypeScript,零运行时依赖,跟 Ink 用的 WASM Yoga(Facebook 的 flex 引擎,C++ 编译成 WASM)对照过 33 个 oracle fixture 加一个结构化 fuzzer 。
本周发的 2.0 想分享一下:在我跑的 9 个基准场景里,纯 TS 引擎都比 WASM Yoga 快。包括 hot-structural(每帧 append + remove 一行),这个场景一周前 Yoga 还领先 5×,现在反过来 Pilates 快 1.7×。
中位延迟,win32-x64,Node 22:
| 场景 | Pilates | Yoga | 比率 |
|---|---|---|---|
| tiny (10 节点) | 4.5s | 19.0s | 4.2× |
| realistic (~100) | 121s | 328s | 2.7× |
| stress (~1000) | 601s | 1.94ms | 3.2× |
| big (~5000) | 3.32ms | 9.17ms | 2.8× |
| huge (~10000) | 8.62ms | 18.5ms | 2.1× |
| hot-relayout | 16.3s | 83.0s | 5.1× |
| hot-relayout + boundaries | 15.8s | 77.8s | 4.9× |
| hot-relayout (文本变更) | 8.9s | 90.6s | 10× |
| hot-structural | 71.3s | 118.3s | 1.7× |
提前说一下:9 个场景是我自己挑的,不能代表所有 workload 。复现 pnpm bench,5 分钟。
这周做的两件事让 hot-structural 从 ~450s 降到 ~70s:
-
flex 分配规则之前每个 cell 都依赖前面所有兄弟的尺寸,一行 100 cell 就有 ~300 条依赖边。改成线性递推,每个 cell 只读前一个 cell 的位置和尺寸。
-
大概一半的 grammar input field 永远停留在默认值上(margin 0, minWidth 0 那种)。在 grammar 构建期把它们 fold 成常量,每个 cell 的字段数从 ~15 降到 ~7 。
公开 API 跟 1.x 字节级一致,calculateLayout() 没变,升级就有提速。
仓库(MIT):https://github.com/pilatesjs/pilates npm:https://www.npmjs.com/package/@pilates/core
欢迎对抗性 benchmark,如果有 workload 是这个方案破解不了的,我很想看看。
Select Language