DOM 测量的代价

你可能见过浏览器控制台的这个警告：

Forced reflow while executing JavaScript took 47ms

这就是强制回流JavaScript 查询几何属性时如果 DOM 状态已经改了浏览器被迫同步重算样式和布局。

布局几乎总是作用于整个文档，元素多了确定位置和尺寸就很慢。有测试显示每帧花超过 28 ms 在布局上，而流畅动画要求 16 ms 内完成一帧。

在循环里频繁读写 DOM。浏览器会反复计算整个页面的布局，这就是布局抖动。

虚拟列表的“鸡生蛋”问题

有个 issue：动态高度虚拟列表在滚动到最底部后往上滚，单元格会“跳跃”。原因是列表从底部加载新内容时之前渲染的项目高度变了但滚动位置没跟着调。

一个几万 star 的库，却直接说“不知道怎么避免”。这不是开发者技术不行，而是根本性的架构问题：虚拟列表需要预先知道每个项目高度才能正确渲染。但文本内容的高度只有渲染后才能测量。经典的“鸡生蛋”问题，

现在的选择就是：要么预先渲染所有项，要么估算高度。按理说，

Canvas 测量也不是银弹

既然 DOM 测量这么慢。用 Canvas 的 measureText 行不行？Recharts 也遇到过这个问题——刻度太多时性能下降，原因是计算刻度可见性时频繁调用 Canvas 测量。 最终调整方法是减少 DOM 测量，实现了倍加速。但 Canvas 文本测量也不是银弹。

Ejecta 项目甚至直接开了个 issue 叫 “measureText is slow”，开发者说只能靠缓存已测量字符串结果来绕过。

Pretext 的思路：用计算换 I/O

主要理念： 用纯算术计算代替 DOM 测量。文本布局完全不碰 DOM，性能提高倍数级。

• prepare: 一次性重工作
• layout: 纯算术换行计算

• prepare: .85 ms / 文本
• layout: .09 ms / 文本
• DOM batch: .05 ms DOM interleaved: .50 ms 交错读写 DOM

再看主要设计，两阶段分离

一次性预处理 )：

// 一次性预处理
const prepared = prepare
// resize 时反复调用
const { height。lineCount } = layout
// 改变宽度
const newResult = layout

•  空白归一化 
<
•     智能分词 
•  合并规则 
•  Canvas 测量每个片段宽度 
•  三级缓存 

纯算术换行 )：

• 纯算术计算累加宽度，判断换行
• 零 I/O不读 DOM，不调 Canvas
• 零分配不创建字符串、数组、对象
• 零回溯贪婪算法 + pending break 机制

性能对比表格

Pretext 的牛逼之处 —— 用 JavaScript 重现浏览器文本引擎但更聪明

• Caching strategy keeps repeated measurements cheap.;
• Zeroth allocation hot‑path ensures V8’s hidden‑class optimization stays happy.;
  - Parallel arrays instead of object arrays give linear memory layout and 娱乐ter cache hit rates.;/ul>

与现有方案对比

&'DOM测量' ✅ ✅ ❌ ✅ 静态页面 /span>

&'虚拟列表' ✅ ❌ ✅ 快速但低精度 /span>