一个困扰前端 30 年的问题,被一个库解决了
如果你做过前端开发,大概率遇到过这个场景:你需要知道一段文字渲染之后有多高,然后根据这个高度去决定其他元素的位置。
标准做法是调用 getBoundingClientRect(),让浏览器告诉你答案。
问题是,每次调用这个函数,浏览器都必须重新计算整个页面的布局——也就是所谓的"重排"(reflow)。这是 Web 开发中最耗性能的操作之一。更糟糕的是,如果你在一个循环里交替读写 DOM,每次读都会触发一次重排,几百个文本块下来,一帧就能轻松超过 30ms,动画卡到肉眼可见。
这个问题存在了 30 年,没有人真正解决过它——直到 2026 年 3 月,程璐(Cheng Lou)发布了 Pretext。
Pretext 是什么?
Pretext 是一个纯 TypeScript 编写的文本测量与布局库,核心特点只有一句话:完全不触碰 DOM,就能精确计算多行文本的高度和布局。
它的工作原理分两个阶段:
第一阶段 prepare():做一次性的重活。将输入文本分词、规范化空白字符、处理断行规则,然后通过离屏 Canvas 测量每个词段的宽度,结果缓存起来。这一步对 500 段文本大约需要 17ms。
第二阶段 layout():每次宽度变化时调用,纯算术运算,不读 DOM,不调 Canvas,不分配新字符串。同样 500 段文本,耗时约 0.1ms。
两相对比,热路径比传统 getBoundingClientRect() 方案快约 500 倍。程璐自己说这是"不公平的比较"——但即便打折来看,性能差距仍然是数量级的。
API 极为简洁:
除了性能,Pretext 还解决了国际化难题:支持中日韩混排、阿拉伯语等从右向左书写系统、平台特定的 emoji 渲染,以及软连字符、零宽连接符等细节处理。
它能做什么?
Pretext 解锁了一批过去在浏览器里要么无法实现、要么只能靠 CSS hack 勉强完成的交互:
- 包含数十万个不同高度文本块的虚拟滚动,以 120fps 流畅运行,不卡顿
- 响应式多栏杂志布局,拖拽调整宽度时文本实时重排,零延迟
- 自动适应文本宽度的聊天气泡,不浪费空间,不截断内容
- 使用可变宽度字体的 ASCII 艺术,每个字符宽度精确测量
演示地址:chenglou.me/pretext
引发了多大关注?
Pretext 于 2026 年 3 月 27 日发布,程璐在 X 上写道:
"我从地狱深处爬了回来,带来了这几年内 UI 工程领域最重要的基础组件之一。"
这条帖子迅速在前端圈引爆讨论。几天之内,GitHub 收获超过 6,800 Stars,登上 Hacker News 热榜,讨论标题为"文本布局的未来不是 CSS"。
Simon Willison(Django 联合创始人、知名技术博主)随即撰文介绍,称其"令人兴奋",并特别提到测试方式之严格:项目用《了不起的盖茨比》全文在多个浏览器验证测量精度,后来又引入了泰语、中文、韩语、日语、阿拉伯语等大量公版文献语料库。
当然,讨论不全是赞美。Hacker News 社区也提出了质疑:
500x 的数字是否夸大? 程璐自己承认这是不公平的比较,对比的是已缓存的热路径和完整的初始冷路径。对于普通网站,这个优化完全不必要;但对于每秒进行数百次布局计算的场景,这是真实的数量级差距。
SSR 还没支持。 目前 Pretext 只能在有 Canvas API 的浏览器环境运行,服务端渲染场景暂时缺失。
发布当天 demo 有 bug。 桌面端文字被 overflow: hidden 截断,移动端体验更差。不过这些都是展示层的问题,并不影响库本身的核心功能。
总结来看:这是一个技术上真有价值、时机极好、但生产就绪程度仍需观望的项目。
作者:程璐(Cheng Lou)
程璐是前端社区的老面孔,现任 Midjourney 工程师。
他早年在 Meta 工作,深度参与了 React 核心开发、ReasonML 和 ReScript(将 OCaml 编译到 JavaScript 的语言方案)、以及 Facebook Messenger 的工程建设。
他最广为人知的开源作品是 react-motion,一个基于物理动画原理的 React 动画库,GitHub 超过 21,700 Stars,曾是 React 生态中最流行的动画方案之一。
Pretext 并非心血来潮。他早年的 chenglou/text-layout 项目已归档,README 直接写明"这里的想法演化成了 Pretext,请用 Pretext 代替。" 这个方向他思考和尝试了很多年。
开发过程本身也很有意思。他让 Claude Code 和 Codex 在不同容器宽度下反复测量浏览器的真实渲染结果,连续跑了数周,以此微调算法的精确度。他在 X 上发图描述那段日子:"等待 AI 验证循环在不同宽度下对照真实浏览器的结果,阿拉伯语花了很长时间,做 Pretext 的那个月瘦了差不多两斤。" 为什么 AI 时代特别需要它?
AI 应用产生的文本有三个特点:动态、海量、长度不可预测。
流式输出的每一个 token 都在改变文本长度,聊天气泡需要实时伸缩,多栏摘要需要在毫秒内重排,虚拟列表需要在不渲染的情况下知道每一项的高度。
这些需求用传统 DOM 测量根本扛不住。Pretext 把文本布局变成了纯数学问题,让 AI 界面真正做到"以任意帧率重排任意数量的动态文本"——这在以前,是做不到的。
如果 Pretext 在生产环境站稳脚跟,它可能会成为下一代 AI 原生 UI 框架的基础设施之一。
项目地址: github.com/chenglou/pretext
npm 安装: npm install @chenglou/pretext
在线演示: chenglou.me/pretext