你知道现在前端开发里Zui头疼的是啥吗？ 就是那个“文本高度”问题，害，真的Neng让你头大。 你想想，你写个文本，想在 Canvas 里画出来或者Zuo虚拟列表，结果你得知道它占多高，对吧？ 但问题是浏览器默认的测量方式，比如 offsetHeight、getBoundingClientRect，一调用就触发回流，性Neng直接崩了。 所以 Pretext 这个库，就是来救场的。

简单说Pretext 是一个纯 JS 的文本测量库，不依赖 DOM 回流，就Neng告诉你这段文本在某个宽度下会占多少高度。 你懂的，这玩意儿对 Canvas 渲染、虚拟列表、服务端渲染这些场景太友好了。 它分两步走：prepare 和 layout。 prepare 是预处理阶段，把文本分段、测量宽度、标记类型。 layout 是布局阶段，根据容器宽度和行高，算出Zui终高度。 关键是 layout 是纯算术，不调用任何测量 API，所以性Neng飞起！

prepare 会把你的文本切成一段一段的，比如“Hello 世界”，它会切出 这样的分段。 然后用 Canvas 测量每一段的宽度，再记录每段的类型。 这些数据dou存到一个叫 PreparedText 的结构里后面 layout 会用到。 这个 prepare 只需要执行一次之后不管你怎么缩放容器，它douNeng快速算出高度。

layout 就是根据 prepare 好的数据，加上你给的容器宽度和行高，来算出文本会占几行，高度是多少。 它不调用任何 DOM API，就是纯算术，所以特别快。 比如你给它一个 300px 宽的容器，它就从 prepare 好的宽度数据里累加，一旦超过宽度，就换行。 比如你有三行文本，每行 24px 高，那高度就是 72px。 就这么简单，但性Neng爆炸，适合在高频场景下用。

你有没有遇到过 emoji 在 Canvas 里宽度不对劲？ 比如字号小于 24px 的时候，Canvas 测出来比 DOM 宽度短。 Pretext 会先用 measureText 测一遍，然后用 DOM 再测一遍，算出一个修正值，缓存起来。 这样下次就直接用 Canvas 的数据加上修正值，不用再调用 DOM 测量，性Neng又上去了！ 咱就是说这波操作，真的牛。

Chrome/Firefox 在字号 <24px 时Canvas 测量的 emoji 比实际 DOM 宽：

if ) {
    const canvasWidth = ctx.measureText.width
    const domWidth = measureDOM  // 一次性 DOM 读取
    const correction = domWidth - canvasWidth
    // 缓存修正值，后续只用 Canvas
}

Pretext 不负责渲染，只告诉你高度！

const { height, lineCount } = layout
// height = lineCount * lineHeight

关键：layout 是纯算术，不调用任何测量 API！

从而实现高性Neng的文本布局计算，特别适合虚拟列表、Canvas 渲染等场景。

prepare  → 一次性预计算
layout   → 纯算术计算高度

type PreparedCore = {
  widths: number
  kinds: SegmentBreakKind
  ...
}

分段类型决定了换行点，比如空格、中文字符、软连字符、硬换行符这些，dou决定了文本Neng不Neng断行。 比如空格后Ke以换行，中文每个字douNeng换，软连字符Ke以加个“-”再换行， 就是强制换行。 这些规则决定了 layout 怎么断行，怎么算高度。

Pretext 用的是浏览器原生的 Intl.Segmenter，自动处理各种语言，比如中文、英文、阿拉伯语、日文、韩文，统统支持。 你不用管它怎么切，它自己会处理。 比如你给它一段中英文混排的文本，它会自动按语言切分段，然后测量宽度，标记类型，再 layout 一下搞定！

比如你有段文本 "Hello 世界! How are you?" 它会切出 然后每个分段的宽度、类型dou给你算好。 layout 的时候，你就给它宽度，它直接返回高度，比如 2 行，行高 24px，那高度就是 48px。 你就Ke以直接用这个高度去设置 DOM 元素的样式，或者 Canvas 里画出来。

比如你用 Canvas 渲染文本，那你就Ke以用 Pretext 算出每行的文本内容和位置。 比如 ctx.fillText 这样一行一行画出来。 你不用再自己算宽度、高度，Pretext dou给你算好了。

比如你有 1000 条文本，每条dou要显示在列表里。 你不Neng每条dou去测一遍 DOM，那性Neng就崩了。 但你Ke以用 Pretext 预处理好每条文本的高度，然后只渲染可见区域的文本。 比如你有 1000 条，每条高度不一样，但你只需要知道总高度，然后只渲染可见的几条。 这样性Neng就起飞了你懂的。

Pretext 的核心创新是把文本测量从 DOM 中剥离出来： 用 Canvas + Intl.Segmenter 实现纯 JS 测量，避免了 DOM 回流。 传统的 getBoundingClientRect、offsetHeight 会触发同步布局回流，当页面有 1000 个文本块时每帧可Neng要花 30ms+ 在测量上。 但 Pretext 不会，它只在 prepare 阶段测一次后面 layout dou是纯算术，性Neng飞起。