这个周末，国外社交平台被一个JS工具刷屏了。
这个工具叫 Pretext —— 一个用 TypeScript 写的文本布局引擎。
仅仅用了一天多的时间，作者的推文阅读量就达到了1300万。而且这个项目的GitHub仓库也获得了近 1 万个star。
它解决的问题很简单，但你一定被它折磨过：
怎么精确算一段文字的高度和换行。
这个问题到底有多烦？
你肯定写过这些：
- 聊天气泡，想刚好撑满 → 每次输入都要测高度，卡顿明显
- 瀑布流 / 卡片流 → 高度永远差一点，布局抖
- 富文本 / AI 界面 → 一换行就重排，直接掉帧
- 虚拟列表 + 不定高 → 滚动时疯狂 layout thrashing
这些问题本质上都一样：
你必须依赖浏览器去测文本
而浏览器一旦参与，就绕不开：
Style → Layout → Paint
哪怕只是测个高度，也是在走 layout。
Pretext 做了什么？
它的思路很直接，仅仅借助 canvas.measureText 和 Intl.Segmenter：
不测 DOM，自己算。
import { measureText } from 'pretext'
const result = measureText({
text: "这是一段很长的文本...",
font: "16px system-ui",
width: 300
})
直接返回：
- 总高度
- 每一行
- 每个字符位置
而且整个过程：
- 不触发 reflow
- 不读 DOM
- 全是纯计算
官方给的数据是：0.05ms 级别
你可以理解为：
以前是“问浏览器”，现在是“自己算答案”
网友给出了很多好玩的例子
作者对数十万个高度各异的文本框进行虚拟化，根本不需要 DOM 测量，在滚动的时候，可以以 120FPS的速度高效遍历：
还有很多很好玩的例子：
这东西真正有意思的地方
不是更快，而是很多场景变简单了：
- 聊天气泡：不再多一行空白、不跳
- 瀑布流：渲染前就能算好高度
- AI 界面：输出即排版，没有闪动
- 虚拟列表：不定高终于好处理了
本质变化只有一句话：
文本布局，从浏览器黑盒，变成了可控计算
最后
前端这些年有很多性能问题，本质都一样：
你在让浏览器做一件很重的事。
Pretext 干的事情其实很简单：
把“测文本”这件事，从浏览器里拿出来了
它不一定会马上成为标配，但至少——
以后再遇到“文字一多就卡”的场景，你有别的解法了。
GitHub：https://github.com/chenglou/pretext