Pretext：前端文本布局的性能革命

点击上方 前端Q，关注公众号

回复加群，加入前端Q技术交流群

一个 15KB 的库，把 Web 文本布局从 50ms 干到 0.09ms，还不碰 DOM。

先说结论：Pretext 是什么

Pretext 是 2026 年 3 月底由 Cheng Lou（React Motion、ReScript 作者，现 Midjourney 工程师）发布的一个零依赖 TypeScript 库，只有 15KB。

它做的事情一句话说清：在不触碰 DOM 的前提下，完成多行文本的测量和布局，速度比传统方案快 300~500 倍。

发布 48 小时内 GitHub Star 突破 14000，X 上曝光超过 1900 万次。MIT 开源协议。

它到底解决了什么问题

Web 文本布局有个 30 年的老痛点：你想知道一段文字有多高，就必须把它塞进 DOM 里让浏览器算一遍。

传统做法是调用getBoundingClientRect()或读offsetHeight，但每次调用都可能触发布局回流（Layout Reflow）——浏览器不得不重新计算整棵渲染树的几何信息。

这件事有多贵？打个比方：一个居民开了下前门，整个城市得重新画一遍地图。

在现代前端场景里，这个问题尤其致命：

Pretext 的核心洞察：把文本布局从 DOM 里搬出来。用 Canvas 的measureText()API 做字体度量的"地面真值"，剩下的全靠纯数学计算。不碰 DOM 节点，不触发回流，不阻塞渲染线程。

核心原理：两阶段模型

Pretext 的设计非常优雅，就两步：

▎阶段一：prepare()—— 一次性预处理

const prepared = pretext.prepare(text, {
fontFamily: 'system-ui',
fontSize: 16,
// ...
});

这一步做的事情：

▸规范化空白字符

▸文本分段（word segmentation）

▸应用语言相关的粘连规则（比如中文标点不能开头）

▸通过 CanvasmeasureText()测量各段宽度

▸把结果缓存为一个不透明的数据结构

500 段文字大概 19ms，是一次性成本。

▎阶段二：layout()—— 纯数学的热路径

const height = pretext.layout(prepared, {
maxWidth: 320,
lineHeight: 1.5,
});

这一步完全不碰 DOM，只做加减乘除。500 段文字只要 0.09ms。

因为是纯数学，你可以在每一帧动画里重复调用，窗口拖拽、物理模拟、实时重排都不会掉帧。

▎进阶 API

layoutNextLine()是最有意思的：你可以给每一行传不同的maxWidth，文字就会自动绕着圆形、图片或任何不规则形状排布。这在印刷排版里是常规操作，在 Web 上以前基本做不到。

性能到底快多少

直接看数据：

关键的不只是"快"，而是快到改变了编程模型：

▸以前：布局计算是异步的、昂贵的，你得小心翼翼地批量操作、节流防抖

▸现在：布局计算是同步的、可预测的，可以当一个普通函数随便调

使用场景

▎1. AI 聊天 / 流式输出界面

AI 逐 token 输出时，消息高度在不断变化。用 Pretext 可以在每个 token 到达时同步计算高度，做到流畅滚动和动画，不用等 DOM 渲染完再去量。

▎2. 紧凑聊天气泡

微信/Slack 那种气泡，传统做法是先渲染、测量、再调宽度。Pretext 的walkLineRanges()可以直接算出保持相同行数的最小宽度，消灭气泡右边的空白浪费。

▎3. Masonry 瀑布流

Pinterest 风格的瀑布流，每张卡片高度不同。以前得"隐形渲染→测量→定位"三步走，现在prepare()完直接预测高度，不用渲染就知道每张卡多高。

▎4. 文字绕障碍物排版

杂志级排版效果——文字自动绕着图片、拉引框、装饰元素流动。用layoutNextLine()逐行传入不同宽度即可实现，而且是实时的，拖动障碍物文字会立即重排。

▎5. 多列编辑排版

类似 Medium 或报纸的多栏布局，文字从一栏溢出自动流入下一栏，配合拉引语和分隔元素。全程 0 次 DOM 测量。

▎6. 虚拟滚动的高度预测

长列表虚拟化的老问题——未渲染项的高度只能猜。有了 Pretext，可以直接算出每一项文字内容的精确高度，滚动条终于不跳了。

语言和排版支持

Pretext 不是只能处理英文：

▸所有语言脚本（中文、日文、韩文、阿拉伯文等）

▸RTL（从右到左）文本

▸双向混排（同一行里有英文和阿拉伯文）

▸Emoji 和复合字素簇（不会在 emoji 中间断行）

▸white-space: normal和pre-wrap模式

▸制表符和硬换行保留

渲染目标也不限于 DOM，支持 Canvas、SVG，服务端渲染在路线图中。

社区反响：发布一周内的疯狂 Demo

Pretext 发布后，社区的创造力直接爆发：

Vercel CEO Guillermo Rauch、Remix 的 Ryan Florence 等前端大佬都公开点赞。

限制和注意事项

Pretext 不是万能的，使用前需要了解这些边界：

简单说：如果你的场景不涉及频繁的文本高度计算或动态排版，直接用浏览器原生能力就够了。Pretext 是给那些被 DOM reflow 卡住脖子的场景准备的。

快速上手

npm install pretext

一个最简单的例子——算一段文字在 320px 宽容器里的高度：

import { prepare, layout } from 'pretext';

const prepared = prepare('这是一段需要计算高度的文字，可能很长很长...', {
fontFamily: 'system-ui',
fontSize: 16,
});

const height = layout(prepared, {
maxWidth: 320,
lineHeight: 24,
});

console.log(E6DB74">`文字高度: ${height}px`);

逐行布局、绕障碍物排版：

import { prepare, layoutNextLine } from 'pretext';

const prepared = prepare(longText, fontOptions);

let y = 0;
let line;
while ((line = layoutNextLine(prepared, {
maxWidth: getWidthAtY(y), // 每行根据 y 坐标动态算宽度
lineHeight: 24,
}))) {
renderLine(line, y);
y += 24;
}

更多 Demo 可以直接看官方演示页：chenglou.me/pretext

总结

Pretext 的意义不只是"快了 500 倍"。它真正改变的是：文本布局从浏览器的黑盒操作，变成了开发者可以自由调用的同步函数。30 年来 Web 文本排版第一次有机会追上印刷和原生应用的水平。

参考资料：

▸Pretext GitHub

▸Pretext 官方 Demo

▸Pretext: The Tiny Library That Makes Web Text Layout 500x Faster

▸Midjourney engineer debuts Pretext to revolutionize web design

往期推荐

Multi-Agent Teams：让多个专家 Agent 像团队一样协作

AI Agent 是怎么"想一步做一步"的？拆解 ReAct 模式

从零开始：用 LangChain.js 构建你的第一个 Tool-Calling Agent

最后

点个在看支持我吧