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 在 https://t.co/blDWOgWxSF。
文本排版一直是前端绕不过去的性能瓶颈,Pretext 给出的方案如果足够成熟,可能会改变 UI 框架处理文本的方式,尤其是在 AI 时代越来越多场景需要实时渲染大量动态文本的背景下。