Pretext：纯JS文本测量库，3天Star超21.9K，性能提升200倍！

最近，前端社区中一个名为 Pretext 的开源项目引起了广泛关注。

该项目由前 React 核心开发者 Cheng Lou 创建，他曾主导开发过 Star 数达 21.9K 的 react-motion。此次推出的 Pretext 在发布仅 3 天后，其 Star 数量便已超越 react-motion。

项目在海外社交平台热度颇高，相关推文获得超 1600 万浏览与 6.4 万点赞，讨论帖超过 6.8 万条。目前，这股热度已蔓延至国内技术社区。

1. 项目简介

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

其核心目标是：在不接触 DOM 的前提下，精确计算出给定宽度下多行文本的渲染高度。

下方演示视频展示了基于该库实现的网页效果，文本布局与高度预测极为流畅。

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

2. 核心优势

多行文本的精确布局在 Web 开发中是一个存在近三十年的难题。传统方案依赖于 getBoundingClientRect 或 offsetHeight 等 DOM API，这些操作会触发浏览器重排，性能开销巨大。在虚拟滚动列表、聊天界面、瀑布流等需要频繁测量文本高度的场景中，性能瓶颈尤为突出。

Pretext 目前已收获超过 3.4 万 Star，体积仅 15 KB，其设计颇具巧思。

两阶段架构，性能提升显著

Pretext 将测量过程拆分为两个阶段：
1. 准备阶段 prepare(text, font)：进行分词、双向文本处理，并利用 Canvas measureText 测量每个文本片段的宽度并缓存。此步骤稍重，处理 500 段文本约需 19 ms。
2. 布局阶段 layout(prepared, maxWidth, lineHeight)：基于缓存的宽度进行纯数学计算，确定换行后的总高度。此步骤极轻，500 段文本仅需 0.09 ms。

关键优势：当容器宽度改变时，只需重新执行第二阶段。由于准备阶段的缓存依然有效，仅通过数学计算即可获得新高度，性能相比传统 DOM 测量提升 200 倍以上。

全语言支持与 100% 准确率

该库不仅支持英文，对中文、日文、韩文等复杂文字同样能够正确处理。在 Chrome、Safari、Firefox 三大浏览器上的测试准确率均达到 7680/7680，即 100%。实现全语言文本的精确测量与布局难度极高，这也是项目发布后迅速获得大量关注的原因之一。

3. 应用场景

场景一：预测文本高度

无需操作 DOM 即可获取精确的文本高度。适用于：
– 虚拟滚动列表
– 瀑布流布局
– 聊天气泡的自适应宽度（shrink-wrap）
– 防止布局偏移（CLS）

场景二：手动逐行布局

可获取每行文本的精确坐标与内容，进而渲染到 Canvas、SVG 或 WebGL 上。借此可实现高级效果，例如：
– 文字绕障碍物流动
– 流体烟雾 ASCII 艺术
– 摄像头追踪人脸时的文字避让
– 物理球碰撞改变文字排列
– 马里奥游戏 ASCII 文字版

AI 辅助开发的典范

开发者 Cheng Lou 在项目开发中大量使用了 Claude Code 和 Codex 等 AI 编程工具。他让 AI 在数十种容器宽度下对比浏览器真实渲染结果，并自动修正差异。该方法在 Hacker News 上被广泛讨论，被认为是 AI 辅助编程的完美范例。Simon Willison 也专门撰文推荐，特别称赞了其采用整本《了不起的盖茨比》进行跨浏览器对比的测试方法。

4. 快速上手

安装

bash
npm install @chenglou/pretext
或使用 bun：
bash
bun add @chenglou/pretext

基础用法：预测文本高度

“`javascript
import { prepare, layout } from ‘@chenglou/pretext’

const prepared = prepare(‘AGI 春天到了. بدأت الرحلة 🚀’, ’16px Inter’)
const { height, lineCount } = layout(prepared, textWidth, 20)
// height 即为精确的像素高度，全程未接触 DOM
“`

高级用法：手动逐行布局

“`javascript
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 即可查看示例。

5. 总结

Pretext 提供了 不依赖 DOM 即可预测文本高度 的能力。对于虚拟滚动、瀑布流、聊天界面等常见场景，以往开发者要么承受性能代价进行测量，要么使用估算值妥协。如今，一个 15 KB、零依赖、100% 准确率 的解决方案已然出现，可直接集成使用，显著提升相关应用的性能与体验。

关注“鲸栖”小程序，掌握最新AI资讯