⌘K

Change language Switch ThemeSign In

Narrow Mode

Cheng Lou releases Pretext: A high-performance, pure TypeScript text measurement library

Cheng Lou releases Pretext: A high-performance, pure TypeScript text measurement library

@dotey

Cheng Lou 发布了一个纯 TypeScript 写的文本测量库 Pretext，能在完全不依赖 DOM 的情况下，精确计算文本的排版尺寸。

Cheng Lou 是前端圈的老熟人，参与过 React、ReasonML、ReScript 的开发，后来在 Midjourney 工作。这次他说自己"从地狱深处爬回来"，带回了这个项目。

为什么这件事值得关注？

做过前端的人都知道，想知道一段文字渲染后占多大空间，标准做法是用 getBoundingClientRect() 去问浏览器。但这个操作会触发 reflow（回流），也就是浏览器被迫重新计算整个页面的布局，是网页里最昂贵的操作之一。而且这种测量没法并行，必须排队处理，写组件时一不小心就会造成读写交错，性能直接崩掉。

Pretext 的思路完全不同：它自己实现了一套文本测量算法，用浏览器字体引擎的输出作为校准基准，但测量过程本身不碰 DOM。根据项目的基准测试，速度大约是传统方案的 500 倍。

体积只有几 KB，支持多语言混排（包括韩文混阿拉伯文从右到左的场景），也能正确处理各平台的 Emoji。

Cheng Lou 展示了几个 Demo 来说明这个能力解锁了什么：数十万个不同高度的文本框做虚拟滚动，120fps 流畅运行；响应式多栏杂志排版，拖拽时文本实时重排；聊天气泡自动贴合文本宽度；甚至用可变宽度字体做 ASCII 艺术。这些以前要么做不到，要么要和 CSS 斗智斗勇。

开发过程也挺有意思：Cheng Lou 让 Claude Code 和 Codex 在各种容器宽度下反复测量浏览器的真实渲染结果，持续跑了好几周，才把精度打磨到位。

项目地址在 GitHub（chenglou/pretext），npm 安装 @chenglou/pretext 就能用。在线 Demo 在 chenglou.me/pretext。

文本排版一直是前端绕不过去的性能瓶颈，Pretext 给出的方案如果足够成熟，可能会改变 UI 框架处理文本的方式，尤其是在 AI 时代越来越多场景需要实时渲染大量动态文本的背景下。Show More

!Image 3: Cheng Lou

#### Cheng Lou

@_chenglou · 1d ago

My dear front-end developers (and anyone who’s interested in the future of interfaces):

I have crawled through depths of hell to bring you, for the foreseeable years, one of the more important foundational pieces of UI engineering (if not in implementation then certainly at least in concept):

Fast, accurate and comprehensive userland text measurement algorithm in pure TypeScript, usable for laying out entire web pages without CSS, bypassing DOM measurements and reflow Show More

!Image 4: 视频缩略图

00:08

742

3,966

33.7K

7.6M ### Pretext Demos From chenglou.me

Mar 29, 2026, 4:46 AM View on X

6 Replies

5 Retweets

66 Likes

18.7K Views  宝玉 @dotey

One Sentence Summary

Front-end expert Cheng Lou has released Pretext, a pure TypeScript text measurement library that removes DOM dependencies and improves performance by 500x.

Summary

Baoyu introduces 'Pretext,' an open-source project launched by front-end developer Cheng Lou. This library implements text measurement using pure TypeScript, bypassing the expensive reflows caused by the browser's getBoundingClientRect() method, resulting in a performance increase of approximately 500x. It supports multi-language mixing and Emojis, making it suitable for high-performance virtual scrolling and real-time typesetting. During development, AI models were used for long-term precision calibration. This project has the potential to reshape how UI frameworks handle text and represents a significant advancement in front-end performance optimization.

AI Score

87

Influence Score 20

Published At Today

Language

Chinese

Tags

Pretext

Front-end Development

Cheng Lou

Performance Optimization

TypeScript HomeArticlesPodcastsVideosTweets

Cheng Lou releases Pretext: A high-performance, pure Type...