React 大佬新作 Pretext 短时间内获得大量关注，它无需 DOM 即可精确计算文本排版尺寸，为前端开发带来全新思路，或将助力 AI 生成 UI。
原文标题：48小时，10k星！React 大佬借助 Claude 和 Codex 搞出新项目卷翻前端
原文作者：AI前线
冷月清谈：
怜星夜思：
2、文章提到 Pretext 通过大量测试数据反向拟合浏览器的排版行为，以解决不同浏览器之间的差异。这种方式的长期维护成本如何？当浏览器更新排版引擎时，Pretext 是否需要进行大规模的重新拟合？
3、Pretext 在 AI 生成 UI 方面具有潜力，但目前 AI 对 CSS 的理解能力也在不断提升。未来，当 AI 能够更高效地生成和优化 CSS 代码时，Pretext 的优势是否会逐渐减弱？
原文内容
近日，一条看似“小众”的前端技术发布，在开发者社区迅速引爆讨论。
前 React 核心成员、曾参与 ReasonML、ReScript 等语言设计、后加入 Midjourney 的工程师 Cheng Lou，发布了一个名为 Pretext 的开源库。
项目地址：https://github.com/chenglou/pretext
短短两天内，该项目在 GitHub 上星标数达到 1.1 万，Hacker News、X（Twitter）、技术博客等多个渠道密集讨论，其传播速度远超一般工具类项目。
与以往的前端工具不同，Pretext 并不解决 UI 框架、状态管理或组件抽象问题，而是瞄准一个更底层、却长期被忽视的技术难题：如何在不依赖 DOM 的情况下，精确计算文本的排版尺寸。
Cheng Lou 自己说，这次是“从地狱深处爬回来”，带来了这个项目。他在 X 上写道：
亲爱的前端开发者们（以及所有对界面未来感兴趣的人）：我历经千辛万苦，终于为大家带来了未来几年内 UI 工程领域最重要的基础组件之一（即便在实现上可能并非如此，但至少在概念上意义非凡）：一个用纯 TypeScript 编写的快速、准确且全面的用户级文本测量算法，可用于无需 CSS 即可布局整个网页，绕过 DOM 测量和重排。
他还介绍，该引擎体积小巧（仅几 KB），能够识别浏览器差异，支持用户所需的所有语言，包括韩语与 RTL 阿拉伯语的混合使用，以及平台特定的表情符号。
他表示，这是通过向 Claude Code 和 Codex 展示浏览器的真实情况，并让它们进行测量和迭代来实现的。
Cheng Lou 调侃道，虽然有点滑稽，但 Claude 这类编码工具的确辅助了 Pretext 的开发。
他表示：“我让 Claude 为我制作了这个交互式装置，以帮助我直观地理解正在发生的事情，它基于 Pretext 本身的简化版本。”
具体而言，Pretext 在实际使用时效果是怎样的？下面是一些演示示例。
官方演示视频
对数十万个高度各异的文本框进行遮挡（虚拟化），无需 DOM 测量，从而将可见性检查简化为一次线性、无缓存的高度遍历，并以 120fps 的速度进行滚动和调整大小。
可收缩的聊天气泡
多栏杂志布局，但具有响应式和动态特性
此外，一些已经体验过项目的用户，也放出了一些演示效果视频。
用户演示视频
用户演示视频 2
用户演示视频 3
用户演示视频 4
Pretext 之所以引发如此大的关注，是因为它解决了一个很容易被忽视但却又极其昂贵的问题。
在传统 Web 开发中，如果需要知道一段文本的高度或行数，唯一可靠的方式是：把它渲染到 DOM 中，再读取尺寸。这通常依赖 getBoundingClientRect 或 offsetHeight 等 API。
但问题在于，这类操作会触发浏览器的 layout reflow（重排）。而重排是浏览器中最昂贵的操作之一——它会让整个页面的布局重新计算，尤其在大量组件同时测量文本时，性能成本会急剧放大。
有开发者总结，这种“先渲染再测量”的模式，在复杂界面中甚至可能带来 每帧数十毫秒的性能开销。
这也是为什么，在诸如聊天界面、长列表虚拟化、AI 流式文本渲染等场景中，文本尺寸计算一直是一个“看似简单、实际棘手”的问题。
Pretext 完全绕过了 DOM 和 CSS 的黑盒，不用碰昂贵的 getBoundingClientRect，不用触发任何页面重排，500 段文本的批量预处理只要 19ms，后续的布局计算更是只要 0.09ms，比传统的 DOM 测量方法快了数百倍。
Pretext 的核心思路可以概括为一句话： 将计算拆分为对一个 prepare 函数的调用，然后是多次对该函数的调用 layout。
具体来说，它通过两阶段机制完成文本测量：
第一步：prepare 函数（预处理）
-
使用
Intl.Segmenter对文本进行分词（不仅支持英文，还包括中文、阿拉伯语、emoji 等复杂字符） -
通过 Canvas API 对每个“词段”进行测量
-
缓存这些测量结果
-
仅在必要时进行一次 DOM 校准
第二步：layout 函数（布局计算）
-
基于缓存的词宽信息
-
用纯数学算法模拟浏览器的换行规则
-
计算文本在指定宽度下的行数与总高度
-
整个过程不再触发任何 DOM 操作
如果只是“测量文字宽度”，这并不复杂。但 Pretext 的目标远不止于此，它试图复刻的是：
浏览器级别的文本排版行为。
这意味着必须处理一系列极其复杂的边界情况：
-
多语言（中文、日文、阿拉伯语等不同断行规则）
-
双向文本（LTR / RTL 混排）
-
emoji 与字体 fallback
-
软连字符（soft hyphen）
-
浏览器差异（尤其是 Safari 的特殊行为）
Pretext 的做法并不是“发明新规则”，而是：以浏览器渲染结果为“真值”，通过大量测试数据反向拟合算法。
例如，它会用整本《了不起的盖茨比》以及多语言语料，在不同浏览器中对比测量结果，以逼近真实排版行为。
这使它更像一个“用户态排版引擎”，而不是普通工具库。
Pretext 在 AI 时代的价值到底在哪？
文字布局现在变成了一个纯函数：输入文字内容、字体参数、容器宽度，输出精确的高度和每个字符的位置。
这意味着什么？AI 生成 UI 的时候，可以直接调这个函数拿到精确的布局信息，不用去理解 CSS 那一大坨复杂的规则。对 AI 来说，CSS 的 box model、BFC、flex 各种行为太不直觉了，但“给我文字和宽度，告诉我高度”这种纯函数接口，AI 能很好地理解。
最直接受益的场景有几个：
第一，做聊天应用的。消息列表的虚拟滚动一直是个老大难问题，因为每条消息高度不一样。Pretext 让你在渲染之前就精确知道每条消息的高度，虚拟滚动变得简单很多。
第二，做内容类产品的。瀑布流、杂志排版、文章分栏，这些场景都依赖提前知道文字占多大空间。
第三，做编辑器或文档类工具的。自动增高文本框、分页、文本选区这些功能，底层都需要精确的文字测量。
第四，做 AI 生成 UI 的。这可能是最有想象力的方向——AI 可以直接调用 Pretext 来计算布局，不用去理解 CSS 的复杂规则，大幅降低 AI 生成可用界面的难度。
在 Hacker News 等平台，关于 Pretext 讨论热度一直攀升。
有用户表示：“这个项目非常令人印象深刻。它解决的核心问题是：在无需先将文本实际渲染到页面（这一步非常昂贵）的情况下，高效计算网页上换行文本的高度。它通过预先计算各个片段（可以理解为单词）的宽度 / 高度并缓存这些值来实现这一点。然后，它用自定义代码完整实现了浏览器通过换行将这些片段组装成文本字符串的算法。这之所以异常困难，是因为需要考虑多种不同的换行类型和字符（连字符断行、emoji、中文等），再加上不同浏览器（尤其是 Safari）在渲染算法上存在细微差异。”
还有用户认为，这从根本上改变了互联网。他在 Thread 上写道：
“Cheng Lou 是 React、Messenger、Midjourney 等项目的核心开发者之一。创建真正动态的生成式 UI，需要我们能按预期操控文本。但我们目前使用的互联网技术老旧且力不从心。我们总是不得不在两个糟糕的选择中做抉择：要么是花里胡哨的 GL 站点，要么是更稳健但死板的纯 CSS 方案。”
值得注意的是，这个项目并不是一边倒的好评。在 X 上，有用户表示，“这看起来和上世纪九十年代初那些充斥着动画 GIF 和彩虹标题的静态网页一样，既不美观也不实用。”
参考链接：
https://somnai-dreams.github.io/pretext-demos/
https://simonwillison.net/2026/Mar/29/pretext/?utm_source=chatgpt.com
https://www.hackernewsbrasil.com.br/item/47556290?utm_source=chatgpt.com
声明：本文为 AI 前线整理，不代表平台观点，未经许可禁止转载。
