前端爆火Pretext：终结20年Reflow痛点，无DOM文本测量秒出结果

前端其实一直有个大家心照不宣的“脏秘密”。

你每次写：

el.getBoundingClientRect()
el.offsetHeight

只是想知道一段文字多高。

但浏览器为了回答你这个问题，往往要做一件非常昂贵的事：

重新计算整个页面的布局（Reflow）

这是 Web 性能里最贵的操作之一。

而我们—— 这样写了 20 年。

这个问题到底有多严重？

很多经典性能问题，其实都指向同一个根源：

• 聊天气泡一输入就抖；
• 瀑布流高度总是对不齐；
• 虚拟列表必须“猜高度”；
• 页面加载时内容突然跳动。

本质都是一句话：文本尺寸，必须通过浏览器才能知道

而浏览器的代价是：

Style → Layout → Paint

你只是想“量一下”，却触发了一整套渲染流程。

困扰前端 20 年，这个地狱级难题终于解决了

3 月 28 日，一个项目在前端圈突然爆火。

作者是 Cheng Lou ——React、ReasonML、ReScript 的核心参与者，后来在 MidJourney 工作。

他在 X 上发布了一个项目：Pretext

短短一天时间：

• 阅读量突破千万级；
• GitHub Star 迅速破万（持续增长中）；
• 评论区全是业内大佬（shadcn、Guillermo Rauch、Ryan Florence 等）。

可以说是——一夜刷屏前端圈

他自己形容这个项目：

“我从地狱深处爬回来，带回了这个东西。”

Pretext 是什么？

一个用 TypeScript 写的“文本布局引擎”

更具体一点：它可以在完全不依赖 DOM 的情况下，精确计算文本排版结果。

传统方式：

文本 → 放进 DOM → 浏览器 layout → 再测量

Pretext：

文本 → JS 计算 → 直接得到布局结果

关键区别：

• 不调用getBoundingClientRect；
• 不触发reflow；
• 不依赖 DOM。

它是怎么做到的？

核心思路其实很“反常识”：  别问浏览器，我自己算
<h4″>第一步：建立“度量体系”

用浏览器的字体引擎作为基准：

canvas.measureText()

获取每个字符的真实宽度。

第二步：一次性处理（prepare）

const prepared = prepare(text, font)

所有复杂计算（分词、测量）只做一次

第三步：纯计算布局（layout）

const { height } = layout(prepared, width, lineHeight)

纯数学运算，零 DOM，零 reflow

为什么会快 500 倍 这么多？

很多人看到“500 倍”会误解。

其实本质不是 JS 更快，而是：

它完全绕开了浏览器最慢的部分：layout

对比一下：

传统方式

读 DOM → 触发 layout → 阻塞主线程

Pretext

纯计算 → O(n) → 可缓存

结果就是：

• layout 可以达到微秒级；
• 大规模文本也能 120fps。

核心亮点

• 零 Reflow：测量文本不再触发浏览器布局；
• prepare + layout 架构：prepare：慢，一次；layout：快，无限次；同一段文本可以被反复布局；
• 多语言支持：中文 / 英文 / 韩文；RTL（阿拉伯语）；Emoji；混排；
• 极致性能：支持数十万文本项计算，适合虚拟列表 / AI UI / Canvas；
• 完全可控：文本布局变成“数据”，而不是浏览器黑盒。

如何快速使用？

安装：

npm install @chenglou/pretext

示例：

const prepared = prepare('你好世界 Hello 🚀', '16px Inter')

const { height } = layout(prepared, 320, 20)

整个过程：

• 不访问 DOM；
• 不触发 reflow；
• 直接得到高度。

需要明确一点：

Pretext 不负责：

• CSS layout（flex / grid）；
• 渲染；
• 选中 / copy / SEO。

它只做一件事：文本布局计算

Canvas / WebGL UI 场景：文本可以进入 GPU 渲染流程，不再依赖 DOM fallback

那未来会不会抛弃 HTML + CSS + DOM？

这是最有意思的问题。

答案是：不会马上替代，但会改变一部分架构。

更可能的未来是：

数据 → JS layout（Pretext） → 任意渲染（DOM / Canvas / WebGL）

也就是说：布局不再完全属于浏览器，这也是 UI 架构的一次方向性变化。

案例查看：

• 案例汇总：打开站点
• pretext-playground：打开站点
• Github 地址：打开站点

以上关于前端爆火Pretext：终结20年Reflow痛点，无DOM文本测量秒出结果的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。