如何准确测量不含DOM结构的纯文本排版效果？

说实话，你有没有遇到过这样的场景：需要精确知道一段文字在屏幕上到底占用了多少像素高度？也许是为了构建一个丝般顺滑的虚拟滚动列表， 也许是为了在 Canvas 上绘制复杂的图文报表，又或者是为了在服务端渲染时彻底消除累积布局偏移，翻车了。。

传统的Zuo法是什么这个？老实说那简直是一场灾难。我们不得不创建一个隐藏的 `div`， 把文字塞进去，挂载到 DOM 树上，然后调用 `getBoundingClientRect`。这一瞬间，浏览器不得不停下手中的所有活儿，强制触发一次完整的 Layout Reflow。

痛点：传统文本测量方法的弊端

太魔幻了。 Ru果你在一个循环里对几千条消息这么Zuo，主线程大体上就宣告“阵亡”了用户界面会卡得让人怀疑人生。害，这可不是危言耸听。

Google 的 Core Web Vitals 把 CLSkan得非常重要。Ru果服务端返回的 HTML 没有包含高度信息， 浏览器加载字体后内容突然撑开，页面就会跳动，CLS 分数直接爆炸。

Pretext：Headless Text Layout的新星

Pretext 的出现， 其实代表了一种趋势：前端工程正在向着geng底层、geng精细化的方向发展。我们不再满足于浏览器提供的“黑盒”布局Neng力，而是开始尝试接管控制权。

它不是一个开箱即用的 UI 组件库，不会给你提供一个 `` 标签。相反，它是一个纯 JavaScript/TypeScript 编写的底层计算引擎。它的核心理念非常简单：你给它一段文字、 一个字体定义和一个容器宽度，它就告诉你这堆文字会折成几行、总高度是多少。

Pretext的工作原理

整个过程， 零 DOM 读写，零 Reflow。咱就是说这才是关键所在。