Pretext 文本测量库发布：不依赖 DOM 实现精准布局，三天获25K Star

最近，一个名为 Pretext 的项目在 GitHub 上迅速走红。它能够在完全不依赖 DOM 的情况下，精确计算文本的排版尺寸，为前端布局带来了新的可能性。

你可以先看看基于这个项目实现的一些演示效果，感受其惊艳之处：

• 在文字穿梭的龙 @Riyvir
• 文字砖块游戏 @singular_prism

这些小龙围绕文字飞舞、文字如流水般动态排版的炫酷动画效果，全部由实时计算生成，运行却异常流畅，毫不卡顿！

项目简介

Pretext 是一款完全脱离 DOM、通过纯计算实现文本布局与尺寸测量的开源库。它由知名开发者 Cheng Lou 打造，他曾是 React 核心团队成员，在前端工程化与渲染优化领域有着深厚的技术积累。

该项目支持中英文、多语种、Emoji 以及双向文本混排，其精度对标浏览器原生渲染。整个库轻量、稳定且可靠，非常适合用于实现虚拟列表、Canvas 渲染或流式 UI。

传统的动态文字效果通常需要先将文字插入页面，再通过 DOM 测量和重排来获取其宽高。这一步不仅缓慢，还容易导致页面卡顿，尤其在动画密集的场景下。

而 Pretext 则直接采用算法提前精确计算文字的换行与高度，完全无需触及页面布局，计算过程既快速又准确。

官方演示还展示了更多应用场景：

• 海量文本虚拟滚动：无需测量 DOM，即可实现 120fps 的丝滑滚动。
• 聊天气泡精准收缩：实现零空白浪费的紧凑布局。
• 响应式动态杂志多栏布局
• 可变宽 ASCII 艺术创意渲染
• 自动增高输入框、多行居中、Canvas 文本 等以往 CSS 难以完美解决的问题。

项目发布后迅速引爆社区，目前在 GitHub 上已获得超过 34k 的星标。

功能特性

• 全程无 DOM 操作：不触发重排，性能损耗极低。
• 两步架构：采用 prepare + layout 模式，一次预处理，可多次复用。
• 广泛兼容：支持多语言、emoji、LTR/RTL 双向文本混排。
• 计算高效：布局阶段为纯数学计算，速度远超传统方式。
• 渲染友好：支持手动控制分行，适配 Canvas、SVG、WebGL 等非 DOM 渲染环境。
• 自带缓存：在重复测量的场景下速度更快。

快速安装与使用

安装非常简单，一行命令即可完成。

npm install @chenglou/pretext

官方主要提供了两大核心使用场景。

场景一：脱离 DOM 测量段落高度

这是最常用的场景，仅需两步：prepare 一次，layout 无数次。

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

const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
const { height, lineCount } = layout(prepared, 320, 20)

如果需要像 textarea 一样保留空格、换行和制表符，只需添加一个配置：

const prepared = prepare(textareaValue, '16px Inter', { whiteSpace: 'pre-wrap' })
const { height } = layout(prepared, 320, 20)

场景二：手动控制分行布局

适用于 Canvas、SVG、WebGL 等自定义渲染场景。官方提供了 layoutWithLines、walkLineRanges、layoutNextLine 等实用 API。

import { prepareWithSegments, layoutWithLines } from '@chenglou/pretext'

const prepared = prepareWithSegments('AGI 春天到了. بدأت الرحلة 🚀', '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)
}

官方提供了丰富的在线演示案例，能够非常直观地感受到其效果和性能优势，建议直接在线体验。

官方演示地址：

• https://chenglou.me/pretext
• https://somnai-dreams.github.io/pretext-demos/

在本地运行演示也很方便，克隆仓库后执行以下命令即可：

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

小结

前端文本测量一直是个历史难题，以往方案往往在精度、性能或代码复杂度上有所妥协。Pretext 通过彻底摒弃 DOM、依赖纯计算的方式，将这件事变得简单、可靠且高性能。其“一次 prepare，多次 layout”的设计，在性能上带来了显著提升。

如果你正在开发文本密集型的项目，或长期受困于 DOM 重排和布局抖动，强烈建议尝试一下 Pretext，它很可能会让你应用的流畅度提升一个档次。

更多详细功能和 API 说明，请访问项目仓库查看：

https://github.com/chenglou/pretext

对于这类解决前端工程核心痛点、兼具创新与实用性的开源项目，正是云栈社区广大开发者所关注和讨论的焦点。社区将持续分享和探索此类优秀的技术方案，助力开发者成长。