Pretext.JS

Pretext.js：彻底告别 DOM 重排的纯 JavaScript 文本布局引擎

在现代 Web 开发中，测量文本高度往往是性能优化的“重灾区”。传统的测量方式依赖于 getBoundingClientRect() 或 scrollHeight，这些操作会强制浏览器暂停脚本执行并进行同步重排（Reflow）。Pretext.js 的出现彻底改变了这一现状，它是一款纯 JS 实现、零 DOM 读取、TypeScript 优先的文本测量库，让开发者能够以纯算术的方式完成复杂的文本布局。

什么是 Pretext.js？

Pretext.js 是由知名开发者 Cheng Lou 开发的一款高性能文本布局引擎。它的核心理念是“测量一次，永久布局”。通过利用 Canvas API 进行初始字形测量并建立缓存，Pretext.js 后续的所有布局计算都仅通过算术运算完成，完全不触碰 DOM 节点。

这意味着在处理包含成千上万条数据的列表时，Pretext.js 可以保持每秒 60 帧的流畅度，而传统方法可能会因为频繁触发重排而导致严重的掉帧和卡顿。它不仅仅是一个库，更是解决 Web 渲染管线中“布局抖动”问题的关键利器。

Pretext.js 的核心特性

⚡ 零 DOM 读取 (Zero DOM Reads)

在调用 prepare() 函数后，所有的 layout() 计算均为纯数学运算。Pretext.js 绝不调用 getBoundingClientRect 或 offsetHeight，从根本上消除了强制同步重排的风险。

🔡 真实的字体度量 (Real Font Metrics)

Pretext.js 使用浏览器自身的 Canvas measureText() 引擎来获取真实的字形宽度，而非基于启发式算法或查找表。这确保了测量结果与浏览器实际渲染的效果完全一致。

🌍 强大的多语言支持 (Multilingual by Design)

它内置支持超过 12 种书写系统，包括中文（CJK）、阿拉伯语、希伯来语、泰语、印地语和韩语。Pretext.js 遵循 Unicode 分词规则，能够准确处理双向文本布局。

📘 TypeScript 原生支持

Pretext.js 采用 TypeScript 从底层构建，提供精确的类型定义。开发者无需额外安装 @types 包，即可享受完美的开发提示和类型安全。

📦 零运行时依赖

该项目不依赖任何外部包或 Polyfill，体积轻量且框架无关，可以无缝集成到 React、Vue 或纯原生 JS 项目中。

使用场景 (Use Cases)

1. 变高虚拟滚动 (Variable-height Virtual Scroll)

在渲染包含 10,000 行且高度不一的列表时，Pretext.js 可以在不到 0.05 毫秒内计算出所有项的高度，确保滚动过程丝滑顺畅。

2. AI 聊天界面

在处理流式输出的 AI 聊天气泡时，使用 Pretext.js 可以在文本渲染完成前预先计算气泡高度，从而消除界面跳动，提升用户体验。

3. 复杂图形文本环绕

由于 Pretext.js 使用纯数学计算，它可以实现 CSS Shapes 无法做到的功能，例如让文本同时在多个障碍物（如可拖拽的球体）两侧进行流式排版。

4. 多语言内容流

在混合了中文、阿拉伯语和拉丁语的社交媒体 Feed 中，Pretext.js 能够精确计算每种脚本的换行和高度，无需针对特定语言编写特殊逻辑。

如何使用 Pretext.js (How to Use)

只需简单三步，即可在您的项目中集成 Pretext.js：

步骤 1：安装

使用您喜欢的包管理器安装：

npm install @chenglou/pretext
# 或者
pnpm add @chenglou/pretext

步骤 2：准备文本 (Prepare)

对文本和字体对进行一次性预处理：

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

const handle = prepare(
  'Hello, Pretext.js — 无需重排即可测量。',
  '16px "Inter"'
);

步骤 3：计算布局 (Layout)

随时以任何宽度即时获取高度，无需担心性能损失：

const { height, lineCount } = layout(
  handle,
  400,  // 容器宽度 (px)
  24    // 行高 (px)
);

console.log(`高度: ${height}, 行数: ${lineCount}`);

常见问题 (FAQ)

Q: Pretext.js 为什么比传统方法快？ A: 传统方法每次测量都会迫使浏览器重新计算整个页面的样式和布局（Reflow）。而 Pretext.js 通过 Canvas 预先缓存字形宽度，后续布局只需进行简单的加法和乘法运算。在处理 1000 个项目时，Pretext.js 仅需约 0.05ms，而传统方法需要约 94ms。

Q: 它支持所有浏览器吗？ A: 是的，Pretext.js 依赖于标准的浏览器 API（如 Canvas），在所有现代浏览器环境中均可稳定运行。

Q: 它可以处理图片或内联元素吗？ A: 根据其设计原理，Pretext.js 主要专注于文本的算术布局。对于纯文本或基于文本的排版需求，它是目前市面上性能最强的解决方案之一。

Q: 名字 Pretext 的含义是什么？ A: "Pretext" 取自其在渲染前（Pre）计算文本（Text）的能力。它象征着在浏览器真正触碰 DOM 之前，我们就已经掌握了布局的一切数据。