打开网易新闻 查看精彩图片

最近有个开源项目让开发者们集体破防了。

前 React 核心成员 Cheng Lou，就是那个做过 ReasonML、ReScript，后来去 Midjourney 的工程师，扔出来一个叫 Pretext 的库。两天内 GitHub 星标破 1.1 万，Hacker News 和 X 上吵得不可开交。

这项目不碰 UI 框架，不搞状态管理，专啃一块硬骨头：不经过 DOM，直接算出文本该占多大地方。

Cheng Lou 自己在 X 上的说法是"从地狱深处爬回来"。他原话更夸张——"未来几年 UI 工程最重要的基础组件之一"。

听起来像吹牛？但看完数据你可能会闭嘴。

打开网易新闻 查看精彩图片

传统做法是什么？你想知道一段文字多高、几行，只能先塞进 DOM 里渲染，再用 getBoundingClientRect 或 offsetHeight 去读。这套流程会触发浏览器的 layout reflow，也就是重排。重排有多贵？复杂界面里每帧能吃掉几十毫秒，大量组件同时测量时性能直接雪崩。

聊天软件的虚拟滚动、AI 流式输出、长列表渲染——这些场景天天被这个问题卡脖子。

Pretext 的思路是：既然 DOM 是黑盒，那就干脆不碰它。

具体实现分两步：prepare 和 layout。先用 Intl.Segmenter 把文本切成词段（中文、阿拉伯语、emoji 都能处理），再用 Canvas API 逐个测宽度。500 段文本预处理 19ms，后续布局计算 0.09ms，比传统 DOM 测量快出两个数量级。

但这不只是"测文字宽度"那么简单。Pretext 要复刻的是浏览器完整的换行排版行为，包括连字符断行、RTL 布局、Safari 的怪癖……Cheng Lou 的做法很粗暴：拿整本《了不起的盖茨比》加多语言语料，在不同浏览器里跑，以真实渲染结果为基准反向拟合算法。

打开网易新闻 查看精彩图片

说白了，这是在用户态造了一个迷你排版引擎。

AI 时代这个能力变得格外值钱。文字布局变成纯函数：输入内容、字体、容器宽度，输出高度和字符坐标。AI 生成界面时直接调接口拿结果，不用去理解 CSS 的 box model、BFC、flex 那些反直觉的规则。

四类产品会最先受益：聊天应用（虚拟滚动终于不头疼了）、内容产品（瀑布流/杂志排版）、编辑器工具（自动增高/分页/选区），以及 AI 生成 UI（大幅降低可用界面的生成门槛）。

Hacker News 上有条评论很到位：创建真正动态的生成式 UI，需要我们能按预期操控文本。但现有技术总在两个烂选项里二选一——要么花里胡哨的 GL 站点，要么稳健但死板的纯 CSS。

当然也有人不买账。X 上有用户吐槽这像"九十年代那些动画 GIF 和彩虹标题的静态网页"，既不美观也不实用。

争议本身说明了一件事：前端领域太久没有这种"重新发明轮子"级别的尝试了。Pretext 能不能成气候还不好说，但至少它把"文本测量"这个脏活累活，从 DOM 的黑箱里拎出来晒了晒太阳。

有位早期体验者在演示视频里展示了十万级文本框的虚拟化滚动，120fps 稳如老狗。Cheng Lou 放话时提到，这玩意儿是"让 Claude 看着浏览器的真实情况，不断测量迭代"做出来的——AI 辅助造出了 AI 时代需要的工具，这个闭环本身可能比项目更有意思。