Pretext 与 Web 文本布局的未来

浏览器布局在大多数场景下表现出色。但当你需要快速连续地测量数千个文本块的高度时，它的局限性便开始显现。Pretext 正是为解决这一矛盾而生。

DOM 重排的真实代价

当你调用 getBoundingClientRect() 或读取某个 DOM 元素的 offsetHeight 时，浏览器必须暂停并重新计算页面的几何结构，才能返回结果。这就是布局重排（layout reflow）。在结构复杂的页面中，它是浏览器渲染中开销最高的操作之一。

对于大多数界面而言，这种开销几乎感知不到。但在虚拟列表、瀑布流网格、AI 聊天流，或任何需要动态测量数百个文本块的 UI 中，重排的代价会迅速叠加，导致掉帧、卡顿，让界面变得比实际更”沉重”。

这正是 Pretext 所针对的具体问题——不是 CSS，不是通用渲染，而是反复的文本测量触发反复 DOM 重排这一特定的痛点场景。

Pretext 的文本测量方案

Pretext 是一个开源 TypeScript 库，由 Cheng Lou 开发。Cheng Lou 以其在 React 领域的贡献而广为人知，目前任职于 Midjourney。该库通过两阶段架构，完全在 DOM 之外完成文本的测量与布局。

第一阶段：prepare()

import { prepare, layout } from '@chenglou/pretext'

const prepared = prepare('Hello, world 🌍', '16px Inter')

这是开销较高的步骤，但只需执行一次。Pretext 使用 Canvas API 的 measureText() 方法对文本进行分段，应用 Unicode 换行规则，并缓存每个分段的像素宽度。整个过程无需读取 DOM，不触发重排。该库依赖 Intl.Segmenter 等现代浏览器 API，这些 API 目前已获得广泛支持。

第二阶段：layout()

const { height, lineCount } = layout(prepared, 320, 24)
// 纯算术运算，无 DOM 操作，无重排。

这是热路径（hot path）。给定容器宽度和行高，它仅利用缓存的分段宽度数据通过纯算术运算计算出最终的自动换行高度。你可以在每次 resize 事件中调用此方法，而不会触发任何重排。

该库发布时分享的基准测试数据显示，对 500 个文本块执行单次布局操作，Pretext 仅需约 0.09ms，而基于 DOM 的测量方式耗时则显著更长。此外，Pretext 还通过 AI 辅助迭代的方式，以浏览器自身的渲染结果作为验证基准，实现了对多语言混排文本、双向脚本和 Emoji 的支持。

适用场景

Pretext 并非 CSS 的替代品。它不处理视觉渲染、无障碍树（accessibility tree），也不涵盖浏览器内联格式化模型的全部复杂性。它是一个专为特定瓶颈设计的专用工具。

以下场景适合使用 Pretext：

• 虚拟文本列表——需要在渲染前准确获取每个列表项的高度
• 瀑布流布局——需要预先计算块高度以确定列的排列位置
• AI 聊天界面——包含流式输出的可变长度消息
• Canvas 或 WebGL UI——文本需要完全在 DOM 之外进行流式排布
• 编辑器和信息流——内容持续变化，布局需要频繁重新计算

对于标准内容页面、博客或营销网站，无需使用 Pretext。浏览器原生布局完全可以胜任这些场景。

值得关注的更广泛趋势

Pretext 折射出前端开发中日益普遍的一种模式：将布局、测量和渲染视为可编程的应用层关注点，而非委托给浏览器处理的黑盒行为。react-window 和 react-virtualized 等库已在列表虚拟化领域践行这一理念，而 Pretext 将其延伸至文本测量层本身。

真正值得思考的问题，并非 Pretext 能否取代什么——它做不到。真正的问题在于：当文本布局不再是黑盒，什么成为了可能？可变宽度文本流、自适应收缩容器、服务端布局预测，以及印刷级别的对齐算法，都将成为可处理的工程问题。

对于正在构建文本测量确实存在性能瓶颈的界面的前端开发者而言，Pretext 值得深入研究。对于其他开发者来说，它也是一个有价值的信号，指示着浏览器渲染技术的前沿走向。

结语

Pretext 并不试图取代浏览器的布局引擎。它专注于一个狭窄而高代价的问题——反复的文本测量——并通过绕开 DOM 的方式给出了简洁的解决方案。对于大多数网站而言，这种区别并不重要。但对于构建虚拟化信息流、瀑布流布局或基于 Canvas 的界面的团队来说，它能带来切实的性能上限提升。更重要的是，它指向了一个未来：文本布局将成为可编程的基础原语，而非封闭的浏览器内部行为。

常见问题

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.