Pretext：告别DOM重排，让文本布局飞起来

引言：你还在为文本布局烦恼吗？

在前端开发中，文本布局一直是个让人头疼的问题。特别是当你的页面有很多文字内容时，浏览器需要不断计算每个元素的大小和位置，这个过程叫做"布局重排"（layout reflow）。想象一下，每次你测量一个按钮的文字是否会换行，或者计算一个卡片的高度，浏览器都要重新计算整个页面的布局，这就像你为了检查一个房间的大小，却要重新测量整栋房子一样低效。

今天要介绍的Pretext，就是来解决这个问题的。它是一个纯JavaScript/TypeScript库，可以让你不碰DOM就能精确测量文本的大小和布局。

什么是Pretext？

Pretext是一个专注于文本测量和布局的JavaScript库。它的核心思想很简单：用数学计算代替浏览器布局。

传统的文本测量方法（如getBoundingClientRect、offsetHeight）会触发浏览器的布局重排，这是浏览器中最昂贵的操作之一。而Pretext通过自己的文本测量逻辑，利用浏览器的字体引擎作为基准，实现了不触发重排的精确测量。

Pretext能做什么？

1. 测量段落高度（完全不碰DOM）

javascript 复制代码

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

// 准备文本（一次性处理）
const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
// 计算布局（纯数学计算）
const { height, lineCount } = layout(prepared, textWidth, 20)

这个例子中，prepare()函数会分析文本、分割单词、测量每个部分的宽度，然后返回一个"预处理"的结果。之后，layout()函数就可以用这个预处理结果，通过纯数学计算得出文本的高度和行数。

重点来了：整个过程完全不碰DOM，不会触发浏览器重排！

2. 手动控制每一行的布局

如果你需要更精细的控制，Pretext还提供了几个强大的API：

layoutWithLines()：获取每一行的详细信息
walkLineRanges()：遍历每一行，获取宽度和位置
layoutNextLine()：逐行布局，每一行可以有不同的宽度

这些API特别适合需要"文本环绕图片"或"动态调整列宽"的场景。

API参数详解

核心API：prepare() 和 layout()

`prepare(text, font, options?)`

这是一次性预处理函数，用于分析文本并测量每个部分。

参数说明：

参数	类型	必填	说明
`text`	`string`	✅	要测量的文本内容，支持任意语言和表情符号
`font`	`string`	✅	字体描述，格式与CSS的`font`属性一致，如 `'16px Inter'`、`'bold 14px "Helvetica Neue"'`
`options`	`object`	❌	可选配置对象
`options.whiteSpace`	`'normal'	'pre-wrap'`	❌

返回值 ：PreparedText（一个不透明对象，传递给layout()使用）

使用示例：

javascript 复制代码

// 基础用法
const prepared1 = prepare('Hello 世界 🌍', '16px Inter')

// 保留空白符（类似textarea）
const prepared2 = prepare(textareaValue, '14px Monaco', { whiteSpace: 'pre-wrap' })

重要提示：

font参数必须与你CSS中实际使用的字体一致，否则测量结果不准确
对于同一文本和配置，只调用一次prepare()，多次调用会降低性能

`layout(prepared, maxWidth, lineHeight)`

这是热路径计算函数，用预处理结果计算段落高度。

参数说明：

参数	类型	必填	说明
`prepared`	`PreparedText`	✅	`prepare()`的返回值
`maxWidth`	`number`	✅	文本容器的最大宽度（像素），超过这个宽度会换行
`lineHeight`	`number`	✅	行高（像素），必须与CSS的`line-height`一致

返回值 ：{ height: number, lineCount: number }

height：整个段落的总高度
lineCount：总行数

使用示例：

javascript 复制代码

const prepared = prepare('这是一段很长的文本...', '16px Inter')
const { height, lineCount } = layout(prepared, 300, 24)
console.log(`段落高度：${height}px，共${lineCount}行`)

典型应用场景：

javascript 复制代码

// 响应式计算：窗口大小变化时重新计算
function updateLayout() {
  const containerWidth = container.clientWidth
  const { height } = layout(prepared, containerWidth, 24)
  container.style.height = `${height}px`
}

window.addEventListener('resize', updateLayout)

高级API：手动控制每一行

`prepareWithSegments(text, font, options?)`

与prepare()功能相同，但返回更丰富的结构，支持手动行布局。

返回值 ：PreparedTextWithSegments（包含分段信息的详细结构）

`layoutWithLines(prepared, maxWidth, lineHeight)`

获取每一行的详细信息。

参数说明：

参数	类型	必填	说明
`prepared`	`PreparedTextWithSegments`	✅	`prepareWithSegments()`的返回值
`maxWidth`	`number`	✅	文本容器的最大宽度（像素）
`lineHeight`	`number`	✅	行高（像素）

返回值 ：{ height: number, lineCount: number, lines: LayoutLine[] }

其中LayoutLine包含：

typescript 复制代码

{
  text: string,        // 这一行的完整文本，如 '你好世界'
  width: number,       // 这一行的实际宽度，如 87.5
  start: LayoutCursor, // 起始游标位置
  end: LayoutCursor    // 结束游标位置
}

使用示例：

javascript 复制代码

const prepared = prepareWithSegments('Hello 世界！这是一段测试文本。', '16px Inter')
const { lines } = layoutWithLines(prepared, 200, 24)

// 在Canvas上绘制每一行
for (let i = 0; i < lines.length; i++) {
  ctx.fillText(lines[i].text, 0, i * 24)
}

`walkLineRanges(prepared, maxWidth, onLine)`

遍历每一行，获取宽度和游标信息（不构建文本字符串，更快）。

参数说明：

参数	类型	必填	说明
`prepared`	`PreparedTextWithSegments`	✅	`prepareWithSegments()`的返回值
`maxWidth`	`number`	✅	文本容器的最大宽度（像素）
`onLine`	`(line: LayoutLineRange) => void`	✅	每行的回调函数

返回值 ：number（总行数）

使用示例：

javascript 复制代码

let maxLineWidth = 0
walkLineRanges(prepared, 300, (line) => {
  if (line.width > maxLineWidth) {
    maxLineWidth = line.width
  }
})
console.log(`最宽的一行：${maxLineWidth}px`)

适用场景：需要二分查找最佳宽度、实现文本"收缩包裹"效果。

`layoutNextLine(prepared, start, maxWidth)`

逐行布局，每一行可以有不同的宽度。

参数说明：

参数	类型	必填	说明
`prepared`	`PreparedTextWithSegments`	✅	`prepareWithSegments()`的返回值
`start`	`LayoutCursor`	✅	起始游标，第一行传`{ segmentIndex: 0, graphemeIndex: 0 }`
`maxWidth`	`number`	✅	这一行的最大宽度（像素）

返回值 ：LayoutLine | null（返回null表示段落结束）

使用示例：文本环绕图片

javascript 复制代码

let cursor = { segmentIndex: 0, graphemeIndex: 0 }
let y = 0

while (true) {
  // 图片左侧的行较窄，图片下方的行恢复全宽
  const width = y < imageBottom ? columnWidth - imageWidth : columnWidth
  const line = layoutNextLine(prepared, cursor, width)
  
  if (line === null) break
  
  ctx.fillText(line.text, 0, y)
  cursor = line.end
  y += 26
}

其他工具函数

`clearCache()`

清除Pretext的内部缓存。

适用场景：应用频繁切换字体时，释放累积的缓存内存。

`setLocale(locale?)`

设置区域设置，影响文本断行规则。

参数说明：

locale：可选，如'zh-CN'、'en-US'、'ja-JP'。不传则使用浏览器当前区域设置。

使用示例：

javascript 复制代码

import { setLocale } from '@chenglou/pretext'

setLocale('zh-CN')  // 使用中文断行规则

工作原理：Pretext是如何做到的？

核心问题：DOM测量为什么慢？

传统方法测量文本高度需要这样做：

javascript 复制代码

// 传统方法：每次都要触发浏览器重排
const element = document.getElementById('myText')
const height = element.offsetHeight  // 触发布局重排！

为什么这很慢？ 想象你在图书馆找一本书：

传统方法：每次找书都要重新整理整个书架（重排）
Pretext方法：提前做好索引，找书时直接查索引

浏览器的布局重排就像"重新整理整个书架"，非常耗时。特别是当页面有很多文本元素时，每次测量都会触发整个页面的重排。

解决方案：两阶段架构

Pretext采用了两阶段测量的巧妙设计：

第一阶段：prepare()（一次性预处理）

javascript 复制代码

// 这一步只执行一次！
const prepared = prepare('Hello 世界 🌍', '16px Inter')

做了什么？

文本分割 ：用Intl.Segmenter把文本分成小片段（单词、空格、标点）
宽度测量 ：用Canvas的measureText()测量每个片段的宽度
缓存结果：把测量结果存起来，以后直接用

关键点：这一步会用到Canvas，但只在文本第一次出现时执行一次。

第二阶段：layout()（纯数学计算）

javascript 复制代码

// 这一步可以无限次调用，超级快！
const { height, lineCount } = layout(prepared, 300, 24)

做了什么？

查缓存：取出之前测量好的每个片段的宽度
算行数：根据容器宽度，计算需要多少行
算高度：行数 × 行高 = 总高度

关键点 ：这一步完全是数学计算，不碰DOM，不触发重排！

性能对比

操作	传统方法	Pretext方法
测量100个文本	~100ms（每次都重排）	~19ms（prepare）+ 0.09ms（layout）
窗口resize时重新计算	~100ms（又重排一遍）	~0.09ms（纯数学计算）

为什么差这么多？

传统方法：每次测量都要等浏览器重排
Pretext：prepare只执行一次，layout只是查表计算

关键技术细节

1. Intl.Segmenter：多语言文本分割

javascript 复制代码

// 自动处理中文、日文、阿拉伯文等
const segmenter = new Intl.Segmenter('zh-CN', { granularity: 'word' })
const segments = segmenter.segment('你好世界')

Pretext用这个API把文本分成"可断行"的片段，支持所有语言。

2. Canvas measureText：精确宽度测量

javascript 复制代码

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
ctx.font = '16px Inter'
const width = ctx.measureText('Hello').width  // 返回精确宽度

Canvas的measureText比DOM测量快得多，因为它不触发布局。

3. 智能缓存机制

javascript 复制代码

// 同一个文本片段，只测量一次
const cache = new Map()
if (!cache.has('Hello')) {
  cache.set('Hello', ctx.measureText('Hello').width)
}

4. Emoji修正：处理浏览器差异

不同浏览器对emoji的测量结果不同。Pretext会自动检测并修正：

javascript 复制代码

// 检测emoji宽度差异
const canvasWidth = ctx.measureText('🚀').width
const domWidth = span.getBoundingClientRect().width
const correction = canvasWidth - domWidth  // 如果有差异，记录修正值

流程图解

复制代码

┌─────────────────────────────────────────────────────────┐
│                    prepare() 阶段                        │
│  ┌─────────┐    ┌─────────┐    ┌─────────┐             │
│  │ 输入文本 │ -> │ 文本分割 │ -> │ 宽度测量 │             │
│  │"Hello世界"│    │["Hello",│    │[42.5,   │             │
│  │         │    │ " ",    │    │ 4.4,    │             │
│  │         │    │ "世界"] │    │ 37.2]   │             │
│  └─────────┘    └─────────┘    └─────────┘             │
│                                     │                   │
│                                     ▼                   │
│                              ┌─────────┐               │
│                              │ 缓存结果 │ (只执行一次)   │
│                              └─────────┘               │
└─────────────────────────────────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│                    layout() 阶段                         │
│  ┌─────────┐    ┌─────────┐    ┌─────────┐             │
│  │ 容器宽度 │ -> │ 查缓存  │ -> │ 计算行数 │             │
│  │ 300px   │    │         │    │ 和高度   │             │
│  └─────────┘    └─────────┘    └─────────┘             │
│                                     │                   │
│                                     ▼                   │
│                              ┌─────────┐               │
│                              │ 返回结果 │ (纯数学计算)   │
│                              │{height, │               │
│                              │lineCount}│              │
│                              └─────────┘               │
└─────────────────────────────────────────────────────────┘

为什么这么设计？

分离关注点：把"测量"和"计算"分开
最大化复用：同一个文本只需要测量一次
避免DOM：用Canvas代替DOM测量
纯数学计算：layout阶段没有任何I/O操作

一句话总结：Pretext就像一个聪明的图书管理员，第一次花点时间整理好索引，以后找书就超级快！

为什么Pretext这么快？

根据官方数据，对于500个文本的批量处理：

prepare()大约需要19ms
layout()只需要0.09ms

这个速度差异非常惊人！原因在于：

预处理一次，多次使用 ：prepare()只在文本和字体配置不变时运行一次
纯数学计算 ：layout()只是做简单的算术运算，不需要浏览器参与
缓存机制：相同文本的测量结果会被缓存

支持所有语言，包括表情符号

Pretext的一个亮点是它支持所有语言，包括：

中文、日文、韩文等CJK字符
阿拉伯文、希伯来文等从右到左的文字
表情符号（🚀）
混合语言文本

这是因为Pretext使用了Unicode标准的文本分割算法，能够正确处理各种语言的断字规则。

实际应用场景

1. 虚拟滚动（Virtual Scrolling）

在聊天应用、社交媒体时间线等长列表中，虚拟滚动是优化性能的关键。传统方法需要预先估算每个项目的高度，但Pretext可以精确计算，让你的虚拟滚动更准确、更流畅。

2. 响应式布局

当屏幕尺寸变化时，文本的换行和高度会改变。使用Pretext，你可以在JavaScript中预先计算不同宽度下的文本布局，实现真正的响应式设计。

3. 开发时验证

在开发阶段，你可以用Pretext检查按钮文字是否会换行，标签是否会溢出，而不需要实际渲染到浏览器。这对于AI辅助开发特别有用，可以在代码生成阶段就发现布局问题。

4. 服务器端渲染（即将支持）

Pretext计划支持服务器端渲染，这意味着你可以在Node.js环境中预先计算文本布局，进一步提升首屏加载速度。

如何开始使用？

安装非常简单：

bash 复制代码

npm install @chenglou/pretext

然后就可以像上面的例子那样使用了。官方还提供了详细的API文档和演示示例。

总结

Pretext是一个非常实用的工具，它用数学计算代替浏览器重排，让文本测量和布局变得又快又准。无论你是开发复杂的响应式应用，还是需要优化长列表性能，Pretext都能帮你轻松解决问题。

最重要的是，它支持所有语言，包括表情符号，让你的国际化应用开发更加轻松。

如果你对文本布局有高要求，不妨试试Pretext，相信它会让你的代码"飞起来"！

参考链接：

GitHub仓库：https://github.com/chenglou/pretext
在线演示：https://chenglou.me/pretext/
安装：npm install @chenglou/pretext