Pretext

最近前端社区突然刷屏一个只有 15KB 的纯 JS/TS 库 —— Pretext（https://github.com/chenglou/pretext）。作者是 Cheng Lou（React Motion 作者、Midjourney 前端工程师），它解决了一个长期困扰高性能 UI 的痛点：如何在不触摸 DOM 的情况下，准确测量和布局多行文本。

传统做法依赖 getBoundingClientRect()、offsetHeight 或临时创建 DOM 元素，这些操作会触发浏览器布局重排（reflow），在虚拟列表、动态聊天、Masonry 布局、Canvas 渲染等场景下极其昂贵。Pretext 彻底绕开了这个问题，用 Canvas measureText 获取浏览器字体引擎的“地面真相”，然后通过纯算术完成布局计算。

Pretext 核心亮点

• 零 DOM 依赖：prepare() 一次性分析文本，layout() 后续全是纯 JS 算术运算，几乎不产生布局成本。
• 极致性能：实测 500 条文本批量处理，prepare() 约 19ms，layout() 仅 0.09ms，比传统 DOM 测量快几百倍。
• 完整 Unicode 支持：完美处理表情符号、混合双向文本（bidi）、各种语言脚本。
• 灵活空白处理：默认 white-space: normal，也可设为 pre-wrap（保留空格、制表符、硬换行），适合 textarea 等场景。
• 低级手动布局 API：支持逐行布局、动态宽度（文字绕图）、游标式流式处理。
• 无外部依赖：纯 TypeScript 实现，体积小巧，MIT 协议。
• 渲染目标广泛：可用于 DOM 高度预计算、Canvas/SVG/WebGL 手动绘制，未来还将支持服务端渲染。

安装与基本使用

npm install @chenglou/pretext
# 或使用 Bun
bun add @chenglou/pretext

最常用场景：不碰 DOM 就计算段落高度

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

const text = 'AGI 春天到了. بدأت الرحلة こんにちは 🌟';
const prepared = prepare(text, '16px Inter');   // 字体字符串需与 CSS 一致

const { height, lineCount } = layout(prepared, maxWidth, lineHeight);
// height 可直接用于虚拟列表行高、容器尺寸计算

保留空白（类似 textarea）

const prepared = prepare(textareaValue, '16px Inter', { whiteSpace: 'pre-wrap' });
const { height } = layout(prepared, textareaWidth, lineHeight);

Canvas 手动绘制多行文本

import { prepareWithSegments, layoutWithLines } from '@chenglou/pretext';

const prepared = prepareWithSegments('Hello world', '18px "Helvetica Neue"');
const { lines } = layoutWithLines(prepared, 320, 26);

for (const line of lines) {
  ctx.fillText(line.text, 0, y);
  y += 26;
}

Pretext 网站截图

高级用法：文字绕图（动态宽度）

使用 layoutNextLine + 游标（cursor），可以实现每行宽度不同的复杂排版，比如文字围绕浮动图片流动。

适用场景推荐

1. 虚拟化列表 / Infinite Scroll —— 提前精确计算每条动态内容的高度，避免抖动和错位。
2. Masonry / 瀑布流 / 自定义 Flex —— 无需 CSS hack，直接用计算出的高度进行定位。
3. Canvas / SVG 图形渲染 —— 聊天气泡、数据可视化、生成式 UI 需要精确文本布局时。
4. 开发时校验 —— 检查按钮文字是否能单行显示、标题是否溢出等。
5. AI / 动态内容场景 —— 高频更新文本时保持滚动锚点稳定，性能优势显著。

与其他方案对比

• 传统 DOM 测量：准确但慢，频繁调用会卡顿。
• 纯 CSS：无法在渲染前得到精确高度，复杂排版受限。
• 其他文本布局库：Pretext 继承了 Sebastian Markbage 早期 text-layout 的思路，但用现代 TypeScript 重写，Unicode 支持更强，API 更清晰，且专注于“零 DOM”。

Pretext 最聪明的地方在于把一次性的“测量准备工作”（prepare）和高频的“布局计算”（layout）分开，前者利用浏览器原生字体引擎保证准确性，后者用纯算术实现极致速度。

目前仓库已获得大量关注（星星快速增长），作者持续迭代，最近还发布了构建后的 ESM 包。仓库里提供了完整 Demo，可直接访问作者站点体验效果。

总结 如果你正在开发对文本布局性能敏感的项目（虚拟列表、富文本编辑器、图形编辑器、AI 界面等），Pretext 可能是 2026 年最值得关注的纯 JS 工具之一。它不是又一个“会画文字”的库，而是把“文本该怎么排版”这个浏览器最基础却最棘手的问题，用极简、极快、极准的方式解决了。