这个 GitHub 项目很有意思啊，解了死磕 30 年的前端难题。

它的作者是前 React 核心开发者，之前做过 react-motion 那个 21.9K Star 的项目。

这次他搞了个新东西，发布 3 天 Star 数就超过了 react-motion。

推文 1600 万浏览、6.4 万赞，X 上相关讨论帖子超 6.8 万条。

现在热度开始蔓延到国内了。

我花时间研究了一下，确实挺顶的。

Pretext 是一个纯 JavaScript/TypeScript 的多行文本测量与布局库。

说直白一点，它解决的问题是：

在不碰 DOM 的情况下，精确算出一段文字在给定宽度下会有多高。

先来看看效果，下面这个视频是我使用和这个库做的网页效果。

只能说，非常丝滑。

开源地址：https://github.com/chenglou/pretext

多行文本灵活布局库，听起来好像不是什么大事。

但这个问题在 Web 开发里已经存在 30 年了。

之前想测文字高度，只能靠 getBoundingClientRect 或者 offsetHeight。

但这些操作会强制浏览器重新计算整个页面布局，代价非常大。

在虚拟滚动列表、聊天界面、瀑布流这种需要频繁测量的场景里，性能直接拉胯。

Pretext 目前已经斩获 3.4 万+ Star，体积才 15KB。

这个项目能这么火不是没原因的，几个核心设计确实有意思。

两阶段架构，性能炸裂

Pretext 把文本测量拆成了两步：

第一步是 prepare(text, font)，负责分词、处理双向文本、用 Canvas measureText 测量每个片段的宽度并缓存。这一步相对重一些，500 段文本大概 19ms。

第二步是 layout(prepared, maxWidth, lineHeight)，基于缓存的宽度做纯算术运算，算换行后的总高度。这一步极轻，500 段文本才 0.09ms。

重点来了：窗口大小变化的时候，只需要重新跑第二步就行。

prepare 的缓存还在，直接用算术就能算出新高度。

比传统 DOM 测量快了 200 倍以上。

全语言支持，准确率 100%

这个库不是只测英文字母的。中文、日文、韩文啥的全都能处理。

而且在 Chrome、Safari、Firefox 三个浏览器上的准确率都是 7680/7680，也就是 100%。

做全语言文本渲染的人都知道这有多难。

所以一经发布，Star 数量就蹭蹭的涨。

一个是预测文本高度。

不需要碰 DOM 就能知道文字多高，虚拟滚动列表、瀑布流布局、聊天气泡 shrink-wrap、防止布局偏移，这些场景都能用上。

二是手动逐行布局。

可以拿到每行文字的精确坐标和内容，然后渲染到 Canvas、SVG、WebGL 上，甚至可以实现文字绕障碍物流动这种高级效果。

你最近刷到的流体烟雾 ASCII 艺术、摄像头追踪人脸做文字避让、物理球碰撞改变文字排列、Mario 游戏 ASCII 文字版，各种花活都有。

这是一个 AI 辅助开发的标杆案例。

开发者 Cheng Lou 在开发过程中大量使用了 Claude Code 和 Codex，让 AI 在几十种容器宽度下对比浏览器的真实渲染结果，然后自动修正差异。

Hacker News 上很多人专门聊这一点，说这是 AI 编程的完美范例。

Simon Willison 也专门写博文推荐，特别称赞了它的测试方法，用整本了不起的盖茨比做跨浏览器对比。

安装很简单：

npm install @chenglou/pretext

或者用 bun：

bun add @chenglou/pretext

基础用法：预测文本高度

import { prepare, layout } from '@chenglou/pretext'
const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')const { height, lineCount } = layout(prepared, textWidth, 20)// height 就是精确的像素高度，全程没碰 DOM

高级用法：手动逐行布局

import { prepareWithSegments, layoutWithLines } from '@chenglou/pretext'
const prepared = prepareWithSegments('一些文本', '18px "Helvetica Neue"')const { lines } = layoutWithLines(prepared, 320, 26)for (let i = 0; i < lines.length; i++) {  ctx.fillText(lines[i].text, 0, i * 26)}

本地跑 Demo

git clone https://github.com/chenglou/pretext.gitcd pretextbun installbun start

然后浏览器打开 http://127.0.0.1:3000/demos 就能看到了。

这个不碰 DOM 就能预测文本高度的能力。

虚拟滚动、瀑布流、聊天 UI，这些天天在用的东西，以前要么牺牲性能去量，要么用估算值凑合。

现在有个 15KB、零依赖、100% 准确率的方案摆在这里，拿来就能用。

END
  推荐阅读：