# Midjourney 工程师开源 Pretext：零依赖文本排版库，用纯算术告别浏览器回流
据 [1M AI News](https://t.me/OneMillion_AI) 监测，Midjourney 工程师、React 动画库 **react-motion** 作者 **Cheng Lou** 近日开源了 **Pretext** —— 一个基于 **JavaScript/TypeScript** 的文本测量与排版库，且 **零依赖**。
与传统依赖浏览器 DOM 测量的方法不同，Pretext 不再使用 `getBoundingClientRect`、`offsetHeight` 等接口，而是绕过 DOM，直接通过**纯算术计算**完成文本高度测量与自动换行，从源头上避免 **layout reflow（布局回流）** 带来的性能损耗。
—
## Pretext 是如何工作的？
Pretext 的核心流程分为两个阶段：
### 1. `prepare()`
通过 **Canvas API** 一次性测量字符宽度，并建立缓存数据。
### 2. `layout()`
基于已缓存的宽度信息，直接进行纯算术排版计算，无需再次触发浏览器布局。
这种设计让文本布局从“依赖浏览器反复测量”，变成了“提前准备 + 快速计算”，效率提升非常明显。
—
## 性能表现有多夸张？
在 **500 段文本** 的基准测试中：
– `prepare()` 耗时约 **19ms**
– `layout()` 仅需 **0.09ms**
Cheng Lou 在配套文章中形容这种提升时写道：
> “性能提升不是渐进的，而是质变的：0.05ms 对比 30ms，零次回流对比五百次。”
这意味着，Pretext 不只是“更快一点”，而是把文本排版性能带到了一个全新的量级。
—
## 支持哪些文本场景？
Pretext 并不局限于英文排版，它支持：
– **中日韩文字**
– **阿拉伯语**
– **emoji**
– **混合双向文本**
同时还能渲染到多种目标环境：
– **DOM**
– **Canvas**
– **SVG**
无论是网页界面，还是图形化编辑器、画布类应用，都具备很高的适配价值。
—
## 典型应用场景
Pretext 特别适合以下场景：
1. **虚拟列表与遮挡剔除**
无需提前猜测文本高度，列表渲染更稳定。
2. **瀑布流等 JavaScript 驱动布局**
更适合复杂、自定义的排版策略。
3. **聊天气泡的多行文本自适应宽度**
文本多少不同，气泡宽度可自然收缩。
4. **图片环绕文本的编辑排版**
更容易实现接近专业编辑器的排版效果。
—
## 为什么值得关注？
Pretext 最吸引人的地方，不只是“零依赖”，而是它试图重新定义前端文本排版的实现方式：
– 不依赖 DOM 实时测量
– 避免高成本布局回流
– 支持复杂语言与多种渲染目标
– 为高性能 UI 和编辑器提供更稳的底层能力
对于需要处理大量文本布局的前端应用来说，这可能会是一个非常值得尝试的新工具。
原创文章，作者：admin，如若转载，请注明出处：https://www.23btc.com/164584/
