前端圈炸了！Pretext让文本测量比DOM快500倍，虚拟滚动直接起飞

做前端的人都知道，文本高度测量是个坑。

虚拟滚动列表里，消息内容长短不一。想算准滚动条位置？传统做法是把每条消息偷偷塞进DOM，等浏览器排完版，再用getBoundingClientRect把高度读出来。这一套下来，直接触发重排——浏览器最怕的操作，一多就卡。

更别提聊天记录成千上万条消息、复杂的富文本排版、阿拉伯语RTL混排……每次测量都是性能黑洞。

现在Pretext把这个问题彻底解决了。

怎么做到的？不碰DOM

Pretext的思路很简单粗暴：绕开DOM，直接算。

它自己写了一套文本测量引擎，你给一段文字和一个字体样式，它直接在JS层算出来在指定宽度下会占多少行、多高。整个过程不碰DOM、不触发重排，纯计算。

官方跑了一组数据：批量预处理500段文本，耗时19毫秒；后续布局计算，0.09毫秒。对比传统DOM测量，快了500倍。

这意味着什么？120fps的虚拟滚动不再是梦。你可以在每一帧里实时重新计算文本布局，不用担心卡顿。

不只是快，还足够“聪明”

如果只是快，Pretext可能只是个性能玩具。但它真正厉害的地方是对复杂文本的处理能力。

它支持：

中日韩文字（CJK）
阿拉伯语RTL（从右向左排版）
Emoji组合（比如这类连字表情）
双向文本混排（RTL和LTR混合）
各大浏览器的兼容性补丁

这些能力让它不仅仅适用于英文列表，而是真正能扛起国际化产品的文本布局需求。

两套API，覆盖所有场景

Pretext的设计很克制，只提供两套API，但覆盖了绝大部分使用场景。

第一套：日常测量

用prepare预处理文本（一次性开销），然后用layout快速计算高度：

import { prepare, layout } from '@chenglou/pretext';const prepared = prepare('你好 World! مرحبًا', '16px Inter');const { height, lineCount } = layout(prepared, 300, 24);

适合虚拟滚动、自适应高度容器、防止布局偏移等场景。

前端滚动条(前端圈炸了！Pretext让文本测量比DOM快500倍，虚拟滚动直接起飞)

第二套：精细控制

如果你需要像杂志一样排版、让文本环绕图片、或者实现“收缩包裹”效果，可以用第二套API：

import { prepareWithSegments, layoutNextLine } from '@chenglou/pretext';const prepared = prepareWithSegments(text, '18px "Helvetica Neue"');let cursor = { segmentIndex: 0, graphemeIndex: 0 };let y = 0;while (true) {  // 动态决定当前行的宽度  const width = y < 80 ? 400 - 120 : 400;  const line = layoutNextLine(prepared, cursor, width);  if (!line) break;    ctx.fillText(line.text, 0, y);  cursor = line.end;  y += 26;}

这套API甚至可以让你在不知道最终宽度的情况下，动态决定每行的宽度，然后算出最合适的容器宽度。这在CSS里几乎做不到，但Pretext用纯JS实现了。

成为AI生成界面时代的基础设施

Pretext的作者chenglou在项目介绍里提了一个很有意思的观点：

它将前端文本布局从浏览器的黑箱变成可预测且可缓存的形式，成为AI生成界面时代的基础设施。

这句话点到了要害。当AI开始批量生成UI内容时，AI很难预测“这段文字渲染出来到底占多高”。有了Pretext，前端开发者可以在开发时就验证所有标签文案是否换行溢出，可以在运行时让AI动态生成的内容精准适配布局，甚至可以在服务端直接计算出文本高度（Pretext未来会支持服务端渲染）。

这意味着，布局不再是浏览器的专属能力。你可以把文本布局变成一个可缓存、可预测、可测试的纯计算过程。