再见 reflow！前端文本布局终于变成了纯函数
介绍 Cheng Lou 推出的纯 TypeScript 文本测量与布局库 pretext，探讨其如何通过数学算法在脱离 DOM 和 reflow 的情况下精确测量文字排版，并分析这一技术在虚拟滚动、聊天气泡及 AI 时代 UI 渲染中的重大意义。
Enivia Cheng Lou（之前在 React、Messenger、Midjourney 团队干过）前两天发布了一篇推文，目前这篇帖子已经 1600+ 万浏览量了。
这个帖子很多人乍一看估计心情跟我一样：不知道具体是什么，但看起来很厉害的样子。
点进仓库链接，我发现他做了一个纯 TypeScript 的文字测量库！叫 pretext！
历史问题
有前端基础的读者必定非常熟悉。
网页上的文字如何进行排列，是浏览器帮你算的。而浏览器排列文字和处理布局的过程，就像是在一个自动流动的容器里填空。它并不能直接把 HTML 丢到屏幕上，而是经历了一个从“文本”到“像素”的转化过程：
- 构建渲染树 (Render Tree)：浏览器将 HTML 变成 DOM 树，将 CSS 变成 CSSOM 树，然后把两者合并。
- 盒子模型 (Box Model)：每一个文字或元素都被看作一个“盒子”。浏览器会根据 font-size、line-height、padding 等属性计算这个盒子的大小。
- 流式布局 (Flow Layout)：默认情况下，浏览器从左到右、从上到下排列这些盒子。
- 行内元素 (Inline)：文字就像流水一样，一个接一个排。如果一行排不下了，浏览器会根据换行算法（寻找空格或连字符）寻找断点，把剩下的文字挤到下一行。
- 文本塑形 (Text Shaping)：浏览器会调用字体引擎（如 HarfBuzz）来决定每个字符的精确形状、间距。
把一段文字塞进一个宽度为 300px 的容器中，会换几行、总共多高，无法提前预知，你唯一的办法是先把文字塞进 DOM，让浏览器排完，再回头问它：这段话占了多高？
浏览器回答这个问题的过程叫 reflow。
过去的几十年里，没有其它办法。想知道文字高度就得触发 reflow。而 reflow 是网页卡顿的头号原因。
Cheng Lou 用纯 TypeScript 实现了浏览器的文字排版算法。不用 DOM，不触发 reflow，就可以直接计算文字高度。
Pretext 效果
Pretext 是一个快速、准确且全面的用户级文本测量算法，完全用 TypeScript 编写，无需 CSS 即可用于整个网页的布局，绕过 DOM 测量和 reflow。
Cheng Lou 展示了几个 Demo 来说明（炫耀）这个能力究竟解锁了什么：
-
数十万个不定高的虚拟滚动文字卡片，无需 DOM 测量，可实现 120fps 高速滚动。
-
聊天气泡自动收缩到最窄宽度。
-
杂志式多栏排版，支持响应式动态重排。
-
还有各种字符堆砌形状、自动增长的长文本区域、手风琴组件、多行文本居中、纯 canvas 实现多行文本等等，全成了附赠小功能。
而且这个包的大小才几 KB，能够识别浏览器差异，支持所有语言，包括韩语与 RTL 阿拉伯语的混合使用，以及平台特定的表情符号。
思维转变
看完了这些 Demo，相信你在感叹的同时，也忍不住想问：这意味着什么？
首先，Pretext 解决了一个困扰前端开发几十年的具体痛点。
在以往，任何涉及到不确定高度的列表、或动态换行的文本，都像一颗定时炸弹。开发者要么为了性能牺牲体验（比如虚拟滚动中强行使用固定高度），要么为了体验牺牲性能（比如频繁触发 reflow）。
我们习惯了在 CSS 的盒模型、浮动、定位和弹性盒子里挣扎，把浏览器的 reflow 当作天经地义，却很少去思考：它是不是唯一解？
Pretext 的出现，给这个难题提供了一个新的数学解，这在 AI 时代尤为重要。
作者曾说过一句很尖锐的话：
“Web 搞了 20 年，弄出个巨复杂的东西，最终效果就这样的话，砍掉 90% 的 API 都够用了。要对得起这个复杂度，效果应该要好上 10 倍才对。结果两头都没占到，读文章不好用，做交互也不好用。“
文本排版一直是前端绕不过去的性能瓶颈，Pretext 给出的方案如果足够成熟，可能会改变 UI 框架处理文本的方式，尤其是在 AI 时代越来越多场景需要实时渲染大量动态文本的背景下，文字布局变成了一个纯函数：输入文字、字体、容器宽度，输出精确的高度和位置。
如果 UI 生成真的从一个依赖渲染引擎的黑盒，变成了一个可预测、可组合的透明过程，那未来 AI 生成 UI 的时候或许真的可以不用再去理解 CSS 那套复杂的规则了。
