Pretext：无DOM前端文本测量引擎，极速高精度多行文本布局计算

一、Pretext是什么

Pretext是一款纯JavaScript/TypeScript编写的轻量级多行文本测量与布局开源库，由前React核心团队成员、现Midjourney工程师Cheng Lou开发，核心定位是在完全不操作DOM、不触发浏览器重排（Reflow/Layout）的前提下，精准计算文本宽度、高度、行数、换行位置等布局信息。

前端领域长期存在文本测量痛点：传统方案依赖getBoundingClientRect、offsetHeight、clientWidth等DOM API，每次调用都会强制浏览器重新计算布局，大量调用会导致页面卡顿、掉帧，尤其在虚拟列表、瀑布流、Canvas自定义渲染、AI动态界面等高频场景下，性能瓶颈极为明显。

Pretext的核心价值就是绕开DOM测量环节，基于离屏Canvas与字体引擎做一次性宽度测量，结合纯数学运算完成布局计算，将文本布局从“浏览器渲染行为”转变为“内存计算行为”，实现毫秒级响应、零重排损耗、全语种兼容的文本排版能力，库体积仅几KB，无额外依赖，可直接接入浏览器与Node.js环境。

该项目开源后短时间内斩获数万GitHub Star，被视为前端文本排版领域近30年的重要突破，广泛适用于Web UI开发、可视化渲染、交互设计工具、AI界面等场景。

二、功能特色

1. 零DOM依赖，彻底消除重排

• 不调用任何DOM测量API，不创建隐藏DOM节点，完全在内存中完成计算

• 从根源避免重排与重绘，高频调用下性能较传统方案提升300-500倍

• 窗口 resize、容器尺寸变化时可无卡顿重新计算布局

2. 两阶段架构，冷热路径分离

• **prepare()**：一次性预处理，完成文本规范化、分词、标点处理、Canvas宽度测量与缓存

• **layout()**：纯算术计算，基于预处理结果快速输出高度、行数、换行位置，支持高频调用

• 预处理结果可复用，同一段文本多次布局无需重复测量

3. 全语种与特殊字符兼容

• 原生支持CJK（中日韩）、阿拉伯语、希伯来语等双向文本

• 完美适配Emoji、特殊符号、混合语种混排场景

• 遵循Unicode断行规则，贴合浏览器原生排版表现

4. 类CSS文本行为兼容

• 支持whiteSpace: pre-wrap/pre/normal等空白符规则

• 支持wordBreak: keep-all/break-all分词断行策略

• 内置富文本行内元素适配，兼容芯片、@提及、代码片段等混合排版

5. 细粒度布局控制能力

• 快速计算指定宽度下文本高度、行数，解决布局偏移（CLS）问题

• 逐行获取文本内容与位置，适配Canvas/SVG/WebGL自定义渲染

• 支持自适应宽度、文本环绕、最大行宽计算等高级布局需求

6. 轻量无依赖，跨环境适用

• 纯TS编写，编译后无第三方依赖，体积仅几KB

• 支持浏览器全版本兼容，可接入Vue/React/原生JS等任意框架

• 未来将支持服务端渲染，实现前后端一致的文本布局计算

三、技术细节

1. 核心架构：两阶段计算模型

Pretext采用测量与布局彻底分离的设计，将高成本操作与轻量操作解耦：

1. 预处理阶段（prepare）

• 文本归一化：处理空格、制表符、换行符，统一空白符规则

• 智能分词：按语种与断行规则拆分文本片段，保留标点粘连逻辑

• 离屏Canvas测量：调用CanvasRenderingContext2D.measureText()获取每个片段宽度

• 结果缓存：返回不可变句柄，后续布局直接复用

2. 布局阶段（layout）

• 基于缓存的片段宽度，按指定容器宽度做换行计算

• 纯数学运算累加行宽、统计行数、计算总高度

• 支持行高、缩进、断行策略等参数配置，输出结构化布局数据

2. 字体测量与精度保障

• 直接调用浏览器原生字体引擎，保证测量结果与DOM渲染像素级一致

• 支持自定义字体、字号、字重、字体样式，测量前自动加载字体确保精度

• 针对等宽字体、非等宽字体做差异化处理，适配不同排版场景

3. 断行算法实现

• 基于Unicode Line Breaking Algorithm（UAX #14）实现标准断行

• 支持中文整词不拆分、英文音节拆分、标点不独行等排版规则

• 内置Shrinkwrap能力，可计算文本最小包裹宽度，实现自适应文本容器

4. 性能优化要点

• 片段宽度缓存机制，避免重复测量相同文本

• 布局阶段仅做加法与比较运算，时间复杂度O(n)

• 批量文本可批量预处理，大幅降低整体计算开销

• 无垃圾回收压力，适合长列表、高频刷新场景

四、应用场景

1. 高性能虚拟列表与长列表

• 提前计算每一行文本高度，精准定位列表项位置

• 滚动时无布局抖动，支持10万+条目流畅渲染

• 解决传统虚拟列表高度预估不准导致的跳动问题

2. Canvas/SVG/WebGL自定义渲染

• 游戏UI、数据可视化、设计工具中的文本排版

• 无需DOM辅助，直接在画布上精准绘制多行文本

• 支持动态字号、响应式宽度、文本动画等效果

3. 响应式布局与CLS优化

• 提前计算文本占位高度，避免内容加载后布局偏移

• 窗口缩放时实时重算布局，保持界面稳定

• 卡片、瀑布流、自适应文本容器的尺寸计算

4. AI界面与动态交互产品

• AI聊天界面、提示词编辑器、动态生成内容的排版

• 高频更新文本内容时保持60/120fps流畅度

• 多语种AI产品的文本布局一致性保障

5. 富文本与编辑器组件

• 轻量级富文本编辑器的行高、行数计算

• 文本溢出省略、展开收起的高度动态计算

• 代码块、标记文本的混合排版布局

6. 服务端文本布局预计算

• 服务端生成PDF、图片时的文本排版计算

• 前后端文本布局结果一致，避免渲染差异

• 静态站点生成时提前计算文本尺寸

五、使用方法

1. 安装

npm install @chenglou/pretext
# 或
yarn add @chenglou/pretext
# 或
pnpm add @chenglou/pretext

2. 基础使用：计算文本高度与行数

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

// 1. 预处理文本（仅执行一次）
const text = 'Pretext是零DOM文本测量库，支持多语种与高精度布局计算🚀'
const fontStyle = '16px Inter, sans-serif'
const prepared = prepare(text, fontStyle)

// 2. 布局计算（可高频调用）
const containerWidth = 320 // 容器宽度
const lineHeight = 24 // 行高
const result = layout(prepared, containerWidth, lineHeight)

// 输出结果
console.log('文本高度：', result.height)
console.log('总行数：', result.lineCount)

3. 高级使用：逐行获取文本（Canvas渲染）

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

const prepared = prepareWithSegments('多行文本测量与布局，Pretext性能提升数百倍', '18px "PingFang SC"')
const { lines } = layoutWithLines(prepared, 300, 26)

// Canvas绘制
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')!
canvas.width = 300
canvas.height = 500

lines.forEach((line, index) => {
 ctx.fillText(line.text, 0, index * 26 + 20)
})
document.body.appendChild(canvas)

4. 配置空白符与断行规则

const prepared = prepare(text, fontStyle, {
 whiteSpace: 'pre-wrap', // 保留换行与空格
 wordBreak: 'keep-all'  // 不拆分中文单词
})

5. 本地运行Demo

git clone https://github.com/chenglou/pretext.git
cd pretext
bun install
bun start
# 浏览器访问 http://localhost:3000/demos

六、竞品对比

Pretext的核心优势在于彻底消除重排+全语种兼容+缓存复用+细粒度控制，在高频、多语种、自定义渲染场景下全面领先传统方案。

七、常见问题解答

Q：Pretext是否需要加载字体后再测量？

A：是的，建议在字体加载完成后调用prepare()，否则可能因字体未加载导致测量偏差，可使用FontFace API监听字体加载完成事件。

Q：Pretext支持自定义行高与缩进吗？

A：基础layout()支持行高配置，高级布局可通过layoutWithLines()逐行控制位置，手动实现缩进、边距等样式。

Q：在Node.js环境中可以使用吗？

A：当前版本主要面向浏览器，Node.js需搭配node-canvas模拟Canvas环境，官方计划后续原生支持服务端渲染。

Q：测量结果和DOM渲染有差异怎么办？

A：确保字体、字号、字重与页面完全一致，关闭浏览器缩放，使用标准字体名称，避免系统字体替换导致偏差。

Q：Pretext支持文本省略、最大行数限制吗？

A：可通过layoutWithLines()获取指定行数内的文本，手动拼接省略号，官方后续可能内置省略工具函数。

Q：大量文本同时预处理会有性能压力吗？

A：prepare()为一次性开销，可做分片处理或Web Worker异步执行，避免阻塞主线程。

Q：支持RTL（从右到左）文本布局吗？

A：原生支持阿拉伯语、希伯来语等RTL文本，断行与测量符合Unicode RTL排版规则。

Q：Pretext可以和React/Vue等框架一起使用吗？

A：完全兼容，无框架侵入性，可在hooks、computed、生命周期中正常调用。

八、相关链接

• GitHub仓库：https://github.com/chenglou/pretext

• 在线Demo：https://chenglou.me/pretext/

九、总结

Pretext作为一款由前端领域资深开发者打造的轻量级文本测量与布局库，通过零DOM触碰、两阶段计算、全语种兼容的核心设计，彻底解决了前端文本测量触发重排的性能痛点，以极致轻量化与高精度计算能力，为虚拟列表、Canvas渲染、AI动态界面等场景提供了可靠的排版基础设施，其无需依赖、接入简单、性能卓越的特点，使其成为现代前端开发中处理文本布局的优选方案，既能保障复杂界面的流畅运行，又能实现多语种环境下的排版一致性，有效降低开发成本与性能优化开销。