Pure JavaScript · Zero DOM Reflow

Pretext

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

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

~600× DOM 测量加速

15KB Gzip 压缩体积

0 外部依赖

0ms DOM 访问次数

⚡ 实际应用场景

数字孪生能量流 SVG 渲染

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

传统方案：每次数值刷新触发完整 DOM 测量（~16ms/次）→ Pretext：纯算术计算（<0.001ms/次）

// 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 精确预测换行时机。

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