Pretext 源码分析：为什么浏览器需要一个"绕开 DOM 的文本测量库"

// 想知道这段文字会占几行
const el = document.createElement('div')
el.textContent = '一段长文…'
el.style.cssText = 'width: 320px; font: 16px Inter'
document.body.appendChild(el)
const height = el.offsetHeight  // ⚠️ 触发整个文档的 reflow
document.body.removeChild(el)

// Problem: DOM-based text measurement (getBoundingClientRect, offsetHeight)
// forces synchronous layout reflow. When components independently measure text,
// each measurement triggers a reflow of the entire document. This creates
// read/write interleaving that can cost 30ms+ per frame for 500 text blocks.

import { prepare, layout } from '@chenglou/pretext'

const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
const { height, lineCount } = layout(prepared, 320, 20)
// ↑ 纯算术。No DOM reflow.

// Solution: two-phase measurement centered around canvas measureText.
//   prepare(text, font) — segments text via Intl.Segmenter, measures each word
//     via canvas, caches widths, and does one cached DOM calibration read per
//     font when emoji correction is needed. Call once when text first appears.
//   layout(prepared, maxWidth, lineHeight) — walks cached word widths with pure
//     arithmetic to count lines and compute height. Call on every resize.
//     ~0.0002ms per text.

文本 + font  →  prepare()  →  PreparedText (一堆 number 数组)
                                          ↓
                       resize / max-width 改变 → layout() → height
                                          ↓
                                      纯算术

type PreparedCore = {
  widths: number[]                       // 每段的宽度
  lineEndFitAdvances: number[]           // 行尾收纳宽度
  lineEndPaintAdvances: number[]         // 行尾绘制宽度（不含 letter-spacing）
  kinds: SegmentBreakKind[]              // 每段的换行行为类型
  simpleLineWalkFastPath: boolean        // 是否走 fast path（普通文本走快路径）
  segLevels: Int8Array | null            // 双向文本层级（仅富渲染用）
  breakableFitAdvances: (number[]|null)[]// 可断词内部每字形宽度
  breakablePreferredBreaks: (number[]|null)[]
  letterSpacing: number
  spacingGraphemeCounts: number[]
  discretionaryHyphenWidth: number
  tabStopAdvance: number
  chunks: PreparedLineChunk[]            // 硬换行预切块
}

let measureContext:
  | CanvasRenderingContext2D
  | OffscreenCanvasRenderingContext2D
  | null = null

export function getMeasureContext() {
  if (measureContext !== null) return measureContext
  if (typeof OffscreenCanvas !== 'undefined') {
    measureContext = new OffscreenCanvas(1, 1).getContext('2d')!
    return measureContext
  }
  if (typeof document !== 'undefined') {
    measureContext = document.createElement('canvas').getContext('2d')!
    return measureContext
  }
  throw new Error('Text measurement requires OffscreenCanvas or a DOM canvas context.')
}

export function getSegmentMetrics(seg: string, cache: Map<string, SegmentMetrics>): SegmentMetrics {
  let metrics = cache.get(seg)
  if (metrics === undefined) {
    const ctx = getMeasureContext()
    metrics = {
      width: ctx.measureText(seg).width,
      containsCJK: isCJK(seg),
    }
    cache.set(seg, metrics)
  }
  return metrics
}

export function getEngineProfile(): EngineProfile {
  if (cachedEngineProfile !== null) return cachedEngineProfile

  const ua = navigator.userAgent
  const vendor = navigator.vendor
  const isSafari =
    vendor === 'Apple Computer, Inc.' &&
    ua.includes('Safari/') &&
    !ua.includes('Chrome/') && !ua.includes('Chromium/') &&
    !ua.includes('CriOS/') && !ua.includes('FxiOS/') &&
    !ua.includes('EdgiOS/')
  const isChromium =
    ua.includes('Chrome/') || ua.includes('Chromium/') ||
    ua.includes('CriOS/') || ua.includes('Edg/')

  cachedEngineProfile = {
    lineFitEpsilon: isSafari ? 1 / 64 : 0.005,
    carryCJKAfterClosingQuote: isChromium,
    breakKeepAllAfterPunctuation: !isSafari,
    preferPrefixWidthsForBreakableRuns: isSafari,
    preferEarlySoftHyphenBreak: isSafari,
  }
  return cachedEngineProfile
}

// Emoji correction: Chrome/Firefox canvas measures emoji wider than DOM at font
//   sizes <24px on macOS (Apple Color Emoji). The inflation is constant per emoji
//   grapheme at a given size, font-independent. Auto-detected by comparing canvas
//   vs actual DOM emoji width (one cached DOM read per font). Safari canvas and
//   DOM agree (both wider than fontSize), so correction = 0 there.

type PreparedLineBreakData = {
  widths: number[]
  // ...
  simpleLineWalkFastPath: boolean   // 普通文本走快路径
  // ...
}

import { prepare, layout } from '@chenglou/pretext'

// 列表里每条评论
function getCommentHeight(text: string, width: number) {
  const prepared = prepare(text, '14px Inter')
  const { height } = layout(prepared, width, 20)
  return height + 16 // 加上 padding
}

const heights = comments.map(c => getCommentHeight(c.text, 600))
// 一次性算完几千条，0 reflow

import { prepare, layout } from '@chenglou/pretext'

textarea.addEventListener('input', () => {
  const prepared = prepare(
    textarea.value,
    '16px Inter',
    { whiteSpace: 'pre-wrap' }  // 保留空格 / 换行
  )
  const { height } = layout(prepared, textarea.clientWidth, 24)
  textarea.style.height = `${Math.max(48, height + 16)}px`
})

import { prepareWithSegments, walkLineRanges, layoutWithLines } from '@chenglou/pretext'

const prepared = prepareWithSegments(message, '15px Inter')

// 第 1 遍：找到最大行宽（不实际生成行字符串）
let maxW = 0
walkLineRanges(prepared, MAX_BUBBLE_WIDTH, line => {
  if (line.width > maxW) maxW = line.width
})

// 第 2 遍：用这个最贴合的宽度生成行
const { lines, height } = layoutWithLines(prepared, maxW, 22)

// → 气泡宽度 = maxW + padding, 高度 = height

import {
  prepareWithSegments,
  layoutNextLineRange,
  materializeLineRange,
  type LayoutCursor,
} from '@chenglou/pretext'

const prepared = prepareWithSegments(article, '16px Inter')
let cursor: LayoutCursor = { segmentIndex: 0, graphemeIndex: 0 }
let y = 0

while (true) {
  // 图片底部以下走全宽，以上让出图片宽度
  const width = y < image.bottom
    ? columnWidth - image.width
    : columnWidth

  const range = layoutNextLineRange(prepared, cursor, width)
  if (range === null) break

  const line = materializeLineRange(prepared, range)
  ctx.fillText(line.text, 0, y)

  cursor = range.end
  y += 22
}

import {
  prepareRichInline,
  walkRichInlineLineRanges,
  materializeRichInlineLineRange,
} from '@chenglou/pretext/rich-inline'

const prepared = prepareRichInline([
  { text: 'Ship ',         font: '500 17px Inter' },
  { text: '@maya',         font: '700 12px Inter',
    break: 'never',        // 整个 @mention 不被切断
    extraWidth: 22 },      // 额外的 chip padding/border
  { text: "'s rich-note",  font: '500 17px Inter' },
])

walkRichInlineLineRanges(prepared, 320, range => {
  const line = materializeRichInlineLineRange(prepared, range)
  // 每个 fragment 自带 source item index、文本切片、gapBefore、cursor
})

// layout.ts 顶端
function getSharedGraphemeSegmenter(): Intl.Segmenter {
  if (sharedGraphemeSegmenter === null) {
    sharedGraphemeSegmenter = new Intl.Segmenter(undefined, {
      granularity: 'grapheme'
    })
  }
  return sharedGraphemeSegmenter
}

'Hello 世界 🌏'  →  ['Hello', ' ', '世', '界', ' ', '🌏']

metrics = {
  width: ctx.measureText(seg).width,
  containsCJK: isCJK(seg),
}

['Hello', ' ', '世', '界', ' ', '🌏']
widths = [27.3, 4.0, 16.0, 16.0, 4.0, 18.5]
kinds  = ['text', 'space', 'text', 'text', 'space', 'text']

maxWidth = 100
acc = 0
lineCount = 0

遍历 widths:
  acc += widths[i]
  if acc > maxWidth → 换行, lineCount++, acc = widths[i]

'Hello' (27.3)  acc=27.3
' '     (4.0)   acc=31.3
'世'    (16.0)  acc=47.3
'界'    (16.0)  acc=63.3
' '     (4.0)   acc=67.3
'🌏'    (18.5)  acc=85.8

→ 一行就放下了, lineCount = 1
→ height = 1 * lineHeight

function consumesAtLineStart(kind: SegmentBreakKind): boolean {
  return kind === 'space' || kind === 'zero-width-break' || kind === 'soft-hyphen'
}

function breaksAfter(kind: SegmentBreakKind): boolean {
  return (
    kind === 'space' ||
    kind === 'preserved-space' ||
    kind === 'tab' ||
    kind === 'zero-width-break' ||
    kind === 'soft-hyphen'
  )
}

{ height: 24, lineCount: 1 }

准备阶段：所有贵的事一次性做完，结果展平成 number[] / Int8Array
查询阶段：纯算术，永不接触 DOM 和 canvas