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

最近前端圈被一个叫 Pretext 的开源项目刷屏了。

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

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

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

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

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

01、开源项目简介

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

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

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

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

只能说，非常丝滑。

arduino 复制代码

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

02、牛在哪里

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

但这个问题在 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 数量就蹭蹭的涨。

03、两种使用场景

一个是预测文本高度。

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

二是手动逐行布局。

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

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

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

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

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

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

04、部署与使用

安装很简单：

bash 复制代码

npm install @chenglou/pretext

或者用 bun：

sql 复制代码

bun add @chenglou/pretext

基础用法：预测文本高度

arduino 复制代码

import { prepare, layout } from '@chenglou/pretext'

const prepared = prepare('AGI 春天到了.             🚀', '16px Inter')
const { height, lineCount } = layout(prepared, textWidth, 20)
// height 就是精确的像素高度，全程没碰 DOM

高级用法：手动逐行布局

css 复制代码

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

bash 复制代码

git clone https://github.com/chenglou/pretext.git
cd pretext
bun install
bun start

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

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

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

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