Pretext：无需 DOM 回流的多行文本测量与布局 TypeScript 库
文章摘要
Pretext 是由 chenglou（React 和 Reason 社区的知名开发者）开发的纯 JavaScript/TypeScript 库，专门解决 Web 开发中一个长期痛点：如何在不触发 DOM 回流（reflow）的情况下，高效测量和布局多行文本。
传统 Web 开发中，获取文本的渲染高度需要调用 getBoundingClientRect() 或 offsetHeight 等 API，这些操作会强制浏览器进行昂贵的布局计算。Pretext 的核心创新在于将文本处理分为两个阶段：准备阶段（prepare） 和 布局阶段（layout）。准备阶段通过 Intl.Segmenter 对文本进行分段，并使用 Canvas API 测量每个分段的宽度，将结果缓存；布局阶段则完全基于纯算术运算，根据容器宽度和行高计算文本高度，性能极为惊人——500 段文本的准备阶段约需 19ms，而每次布局计算仅需约 0.09ms（约 0.0002ms/段）。
该库支持多种高级功能：多语言文本（中文、阿拉伯语、emoji、双向混排）、两种空白模式（white-space: normal 折叠空格和 pre-wrap 保留空格）、多种输出模式（DOM、Canvas、SVG）。其 API 设计非常灵活：layoutWithLines() 返回完整的行对象，walkLineRanges() 提供行几何信息而不具象化文本字符串，layoutNextLine() 支持逐行变宽布局——可以实现文本环绕浮动图片等复杂效果。
此外还有一个实验性的 @chenglou/pretext/inline-flow 模块，用于处理混合字体和原子级元素（如标签芯片）的内联流布局，管理跨元素边界的空白折叠和换行约束。
HN 评论精华
高度认可与技术分析：
simonw（知名开发者 Simon Willison）称赞这个库”非常令人印象深刻”，解释了它解决的核心问题——在不渲染到页面的情况下高效计算换行文本高度。Trufa 认为这代表了 Web 发展的”第二阶段”（先用 JS hack 实现，再等 CSS 标准化），并赞扬了 RESEARCH.md 中记录的浏览器兼容性工作。
性能争议：
leeoniya（uPlot 作者）展示了自己一年前写的类似工具 uWrap.js，在 ASCII 文本上性能差距巨大：uWrap 80ms vs Pretext 2200ms。但 aylmao 反驳说，软连字符、emoji 修正、非拉丁文支持等功能是基础架构需求，不能简单比较功能范围差异巨大的库。
实际应用场景：
jimkleiber 希望用它简化 Remotion 视频中的动态字幕创建难题。btown 分享说自己曾花大量时间用 Selection API 和包围盒计算构建自定义打印手册排版系统，Pretext 的逐行迭代生成功能会极具价值。
精度问题：
spoiler 分享了 Canvas 测量在 Linux 和 Android 系统上与 DOM 实际渲染存在约 1 像素差异的经验。Retr0id 在 Fedora Firefox 上报告了渲染失真，并指出此类库的开发就是”永远在追一条长长的边缘情况尾巴”。
未来方向：
tadfisher 预测浏览器最终会将文本布局测量 API 标准化。esprehn 提到了 FontMetrics API 提案是正确的长期解决方案，但遗憾的是 Chrome 团队目前优先开发 AI 相关 API 而非排版基础设施。