Midjourney 工程师、前 React 核心团队成员 Cheng Lou 近期发布了 Pretext，这是一个仅 15KB 的开源 TypeScript 库，可以在不触及 DOM 的情况下完成文本测量与布局计算。这种方式避免了昂贵的浏览器布局重排（reflow），从而使无限列表、瀑布流布局以及滚动位置锚定等高级 UI/UX 模式能够以 60 至 120 FPS（帧率）运行。Pretext 通过一个 AI 循环构建，该过程对 DOM 的布局计算机制进行了逆向分析。
对于面向消费者的应用（如 B2C），终端用户体验是实现差异化和推动采用的关键因素。Web 应用长期以来依赖多种高级 UI/UX 模式，例如瀑布流布局（如 Pinterest、Tumblr）、虚拟列表滚动（如 X，即原推特）以及滚动位置锚定。其中一些模式正在逐步被纳入 CSS 标准，例如用于瀑布流的 CSS Grid 以及 overflow-anchor 属性，但浏览器支持情况仍不一致。任何基于 JavaScript 的自定义实现，都容易受到布局抖动及其带来的性能开销影响。
当应用需要计算文本高度时——例如在包含数千条数据的虚拟列表、瀑布流网格或持续流式的 AI 聊天界面中——通常会通过 getBoundingClientRect 或 offsetHeight 等方式查询 DOM。浏览器随后会触发布局重排，强制渲染引擎重新计算页面中所有元素的几何信息和位置。在页面复杂或渲染预算紧张的情况下，这类重排会导致帧率下降和界面卡顿。
Pretext.js 则完全绕开了重排机制。该工具分为两个阶段运行。首先是 prepare() 阶段，利用 Canvas API 的 measureText() 对文本进行分析，根据字体、间距以及 Unicode 规则，计算每一段文本的像素宽度，并将结果缓存下来。这一阶段的成本只需支付一次。随后是 layout() 阶段，它基于这些缓存宽度，通过纯数学计算得出在特定容器尺寸下的行数和最终高度。layout() 是高频调用路径，可以根据容器尺寸变化反复执行。由于两个阶段都不读取 DOM，因此不会触发任何昂贵的重排操作。
根据社区分享的多项性能测试，在 500 个文本块上执行一次布局计算，Pretext 仅需约 0.09 毫秒，性能相比传统基于 DOM 的方法最高可提升约 600 倍。这使得应用即使在用户实时操作、需要动态文本换行的场景下，也更容易维持 120 帧的流畅表现。
有趣的是，Lou 表示 AI 在该库实现多语言支持方面发挥了关键作用：
这个引擎体积很小（仅几 KB），能够处理浏览器中的各种细节差异，并支持你所需的所有语言，包括韩语与从右到左书写的阿拉伯语混排，以及平台特定的表情符号。我们的方法是将浏览器的真实渲染结果作为基准，交给 Claude 和 Codex，在不同容器宽度下反复测量与迭代，这一过程持续了数周。
这种以现有软件作为“判定标准”进行验证的方法，展示了自主 AI 循环的潜力。近期还有一个案例：16 个 Claude 代理在仅两周内构建了一个通过 99% gcc 测试的 C 编译器。虽然该编译器尚未达到生产级别，但几乎不需要人工干预。
开发者社区对该项目的发布反响极为积极。该仓库在发布后的 24 小时内获得了 1.6 万个 GitHub Star。开发者已经开始将其应用于此前被认为在 Web 上过于“沉重”的界面场景。Simon Willison 在其博客中就提到，该库能够在 Web 上实现接近专业印刷级别的排版效果。
一位设计师表示：
印刷设计师与网页设计师之间一直存在差距，很大程度上体现在文本处理上。我对这些精美的 Pretext 演示非常着迷，也收藏了一些我最喜欢的案例。
……对于平面设计师来说，这意味着在 Web 上使用文本时，可以获得与印刷领域相同的灵活性。
感兴趣的开发者可以查看丰富的演示和使用案例，例如可变高度的虚拟滚动、动态 AI 聊天气泡以及多语言内容流。此外，对数学排版感兴趣的读者，还可以体验一个交互式对比工具，将 Pretext 与 Web 标准方案以及 Knuth–Plass 算法（用于著名的 TeX/LaTeX 排版系统）进行比较。
