这个周末，国外社交平台被一个JS工具刷屏了

事情是这样的，一个名叫 Pretext 的工具突然火了起来。它是个用 TypeScript 写的文本布局引擎，听起来挺技术，对吧？但它解决的问题，每个前端开发者都一定深有体会。

热度有多高呢？作者的推文在一天多的时间里阅读量冲到了1300万，项目的GitHub仓库更是轻松收获了近万个star。

图片

它瞄准的痛点其实特别具体，甚至可以说是个“古老”的难题：如何精确计算一段文字的高度和换行位置。

这个问题到底有多烦？

不妨回想一下，下面这些场景你是不是都经历过：

• 聊天气泡：想让气泡刚好包裹文字，不多一行空白？结果每次输入都得实时测量高度，页面卡顿得让人心烦。
• 瀑布流 / 卡片流：图片和文字混排，高度永远算不准，加载时布局跳动、闪烁。
• 富文本 / AI 对话界面：文字动态输出，一换行整个布局就重排一次，视觉上直接“掉帧”。
• 虚拟列表 + 不定高：滚动时为了计算位置，浏览器疯狂进行布局计算，性能瞬间被拖垮。

这些问题，说到底根源都一样：你不得不依赖浏览器去测量文本。而浏览器一旦介入，就不可避免地要走完“样式计算 → 布局 → 绘制”这一整套流程。哪怕你只是想提前知道一行字多高，也等于在触发一次布局计算，代价高昂。

Pretext 做了什么？

Pretext 的思路相当直接，甚至有点“釜底抽薪”的意思：既然问浏览器这么麻烦，那为什么不自己算？

它的核心是绕开DOM，仅仅利用 canvas.measureText 和现代化的 Intl.Segmenter API，在纯 JavaScript 层面完成所有计算。

import { measureText } from ‘pretext’
const result = measureText({
  text: “这是一段很长的文本...”,
  font: “16px system-ui”,
  width: 300
})

调用之后，直接就能拿到准确的结果：文本的总高度、每一行的具体内容，甚至每个字符的位置信息。整个过程有几个关键特点：

• 不触发回流（reflow）
• 不读取任何 DOM
• 完全是纯计算

根据目前的数据，一次测量的耗时可以达到惊人的 0.05毫秒 级别。简单来说，以前是每次都要“询问浏览器办公室”，现在是手头就有一张“速查表”，答案瞬间可得。

网友给出了很多好玩的例子

效果如何？看社区的反响就知道了。作者展示了一个例子：对数十万个高度不一的文本框进行虚拟化滚动。整个过程完全不需要DOM测量，滚动时帧率能稳稳保持在120FPS，流畅得不像话。

当然，好玩的demo远不止这一个：

这东西真正有意思的地方

速度快固然亮眼，但Pretext更重要的价值在于，它让很多复杂场景的实现变简单了。

• 聊天气泡：高度精准匹配，不再有多余空白或突然跳动。
• 瀑布流：在渲染之前就能计算出所有元素的确切高度，布局一气呵成。
• AI 对话界面：文字流式输出时即可完成排版，没有闪烁和重排。
• 虚拟列表：处理不定高内容终于不再是个噩梦。

这背后的本质变化其实可以用一句话概括：文本布局，从一个浏览器内部的黑盒过程，变成了一段可控的、确定性的计算。 可控性，才是解锁更多可能性的关键。

最后

回顾前端发展，许多棘手的性能问题，根源往往相似：我们在迫使浏览器完成一项对它而言非常繁重的任务。Pretext 所做的，本质上就是把“测量文本”这件特定的事情，从浏览器的职责中剥离出来，前置到纯计算阶段。

它未必会立刻成为所有项目的标配，但它的出现明确指出了一个方向。至少，下次再遇到“文字一多页面就卡”的尴尬情况时，你手头多了一个值得考虑的、更加优雅的解法。

项目地址：https://github.com/chenglou/pretext