Pure JavaScript · Zero DOM Reflow

Pretext

比浏览器快 300-600 倍的文本渲染引擎

光之涟漪自主研发的极速文本测量技术。无需 DOM 访问，即可精确计算多行文本宽度、高度和换行位置。零回流，零抖动，广泛适用于数据可视化、图表标签、动态文字布局。

~600× DOM 测量加速

15KB Gzip 压缩体积

0 外部依赖

0ms DOM 访问次数

⚡ 实际应用场景

数字孪生能量流 SVG 渲染

实时能量流（Pretext 标签宽度预计算，无 DOM 回流）

苏州工业园

杭州未来科技城

南京江北新区

数据来源：enos.solaripple.com · 最后更新：—

📊 性能对比

帧率 & 回流时间实测

传统 DOM 测量

— 每次标签刷新（含 DOM 回流）

Pretext 纯算术

— 同量标签刷新（零 DOM 访问）

// Pretext: 光伏功率标签宽度预计算
import { prepare, layout } from 'pretext';

// Phase 1: 准备（一次性，Canvas 测量）
const handle = prepare({
  text: '4,320 kW · 效率 94.2% · 超配比 1.12',
  font: 'SF Mono, Menlo, monospace',
  fontSize: 11,
});

// Phase 2: 布局（纯算术，零 DOM 访问）
const { height, lines } = layout(handle, { width: 160 });
// → height: 28.5px, lines: 2 → SVG 动态定位，无 reflow

// 对比：每帧重新测量 48 个标签
// 传统: 48 × 16ms = 768ms/frame（DOM 重排）
// Pretext: 48 × 0.001ms = 0.048ms/frame（算术）
  

为什么选择 Pretext？

三大高价值应用场景

⚡

数字孪生能量流

EnOS 平台能量流 SVG 包含数十个动态标签（功率、电流、SOC）。Pretext 在首次 Canvas 测量后，后续帧仅用算术计算，杜绝刷新抖动。

价值：消除 50+ 标签/reflow 卡顿

📊

AI 预测图表

48h LSTM 预测图表每 30 秒刷新一次。ECharts / Recharts 轴标签若用 DOM 测量会导致帧率下降。Pretext 将测量成本降至可忽略。

价值：图表刷新帧率 +60%

🔢

实时数据卡片

光伏装机容量、收益数字、调度指令等动态文字。容器宽度固定但数字位数变化，Pretext 精确预测换行时机。

价值：零布局抖动 · 毫秒级响应

📖 API 文档

快速开始

prepare(text, options)

一次性 Canvas 测量，将文字的每个词（含宽度）缓存起来。后续 layout 调用无需 DOM 访问。

const h = pretext.prepare({ text: '...', font: '12px SF Mono', fontSize: 12, fontFamily: 'SF Mono' })

layout(handle, width)

纯算术计算：根据给定宽度自动分行，返回高度、行数和每行宽度。

const { height, lines } = pretext.layout(h, { width: 160 })

measureWidth(text, font)

单次测量任意字符串宽度，结果会被缓存。适合不规则文字（如数字 + 单位）的精确宽度。

const w = pretext.measureWidth('¥1.234', '12px monospace')

clearCache()

清空所有测量缓存。文字内容或字体改变后调用。Gzip 压缩后约 1.2KB。

pretext.clearCache()