Pretext.JS 概览
Pretext.JS 是一个高速、纯 JavaScript/TypeScript 的文本排版引擎，用纯算术方式对多行文本进行测量和布局，而无需访问 DOM（Document Object Model）。它彻底规避了传统通过 getBoundingClientRect() 等 DOM 测量带来的“强制同步回流”性能瓶颈，实现极快且高效的文本布局。其核心理念是“只测量一次，之后布局瞬时完成”，让后续布局计算几乎在瞬间完成。
主要用途
为各种动态、复杂 Web 界面提供高性能、精准且无回流的文本布局测量（如高度、行数等）。它专门解决因频繁 DOM 测量而导致的浏览器抖动和卡顿等关键性能问题。
目标用户群体
构建高性能、文本密集型界面的 Web 开发者和团队。典型场景包括：虚拟滚动列表、AI 聊天界面、代码编辑器、协作白板、数据可视化，以及任何需要动态文本布局同时又必须保证流畅、快速、响应及时的用户界面。
功能细节与操作流程
Pretext.JS 的核心由两个步骤组成：
-
prepare(text, font)
对指定文本和字体样式执行一次性预处理。该函数会规范化空白字符、应用 Unicode 换行规则、对文本进行分段，并调用浏览器的 Canvas 字体引擎精确测量每个分段字形的进宽（glyph advance width）。所有测量结果会缓存在一个可复用的 “handle” 中。 -
layout(handle, containerWidth, lineHeight)
该函数是纯算术运算，执行极快。基于预处理得到的 handle、容器宽度以及行高，通过累加分段宽度计算换行位置，得出总行数并计算整体文本高度。整个过程完全不读取 DOM，从而完全避免回流。
关键能力
-
零 DOM 读取
在完成首次prepare()调用后，所有layout()操作都是纯算术，不再调用getBoundingClientRect()、offsetHeight等 API，彻底消除强制同步回流。 -
真实字体度量
利用浏览器原生 Canvas 字体引擎来测量字形宽度，确保文本布局与浏览器真实渲染效果高度一致。 -
原生多语言支持
面向多语言场景设计，完整支持 CJK（中文、日文、韩文）以及阿拉伯语、希伯来语、泰语、印地语等复杂书写系统，具备正确的 Unicode 文本分段与双向文本处理能力。 -
TypeScript 原生支持
从零以 TypeScript 编写，为所有函数、参数与返回值提供精确类型定义，无需额外@types包。 -
可复用的预处理句柄
单次prepare()调用即可生成可复用 handle，可针对不同容器宽度（如手机、平板、桌面端）重复计算布局，额外开销极低。 -
零运行时依赖
完全基于标准浏览器 API 构建，打包体积精简，不会引入不可控的第三方依赖问题。
用户收益
-
极致性能
相比传统基于 DOM 的文本布局，可实现最高约 500 倍的性能提升，轻松支撑 60fps 流畅滚动，即便界面中同时存在成千上万条动态文本元素也能保持高度响应。 -
更佳用户体验
消除界面“抖动”、跳动和布局乱闪等问题，为动态内容流、聊天界面等场景提供平滑稳定的视觉体验。 -
布局精准
提供与浏览器真实渲染高度一致的精确文本测量结果，避免视觉错位和对不齐等问题。 -
开发更简单
通过简洁、TypeScript 原生的 API 屏蔽复杂的文本测量细节，大幅提升开发效率。 -
全球化应用就绪
对多种书写系统的强大支持，帮助快速构建真正国际化的 Web 应用。 -
轻量且稳定
无外部运行时依赖，打包更轻，运行更稳定。
兼容性与集成方式
-
与框架无关
作为纯 JavaScript/TypeScript 库，Pretext.JS 可无缝集成到任意现代 Web 框架（如 React、Vue、Angular、Svelte）以及原生 JavaScript 项目中。 -
现代浏览器支持
基于所有现代 Web 环境都提供的标准浏览器 API 运行。 -
安装方式
可通过主流包管理器快速安装：npm、pnpm、bun。 -
TypeScript 集成
提供原生 TypeScript 支持，可直接接入 TypeScript 工程，无需额外配置。
真实应用场景与示例
-
虚拟滚动列表（Virtual Scroll）
展示如何在没有任何 DOM 读取的情况下渲染 10,000 行高度不一的列表，并保持流畅的 60fps 滚动体验。 -
AI 聊天界面
用于预先计算 AI 流式回复的聊天气泡高度，彻底消除布局跳动和闪动。 -
国际化内容流
精准展示混合中文、阿拉伯语、韩语及拉丁文字的多语言内容流，并在虚拟列表中保持正确布局。 -
社区展示案例
包括沙地写字效果、几何文本可视化、实时 3D 对象文字环绕等创意玩法，充分展现其多样性与可扩展性。
获取与使用方式
-
安装
- 使用 npm：
$ npm install @chenglou/pretext - 使用 pnpm：
$ pnpm add @chenglou/pretext - 使用 bun：
$ bun add @chenglou/pretext
- 使用 npm：
-
使用步骤
- 引入
prepare和layout函数：
import { prepare, layout } from '@chenglou/pretext' - 调用一次
prepare(text, font)获取可复用的 handle。 - 调用
layout(handle, containerWidth, lineHeight)即可瞬时得到文本高度和行数。
- 引入
-
在线体验
官方网站（pretextjs.dev）提供在线 playground 和多种示例，可直接在浏览器中测试和深入了解其能力。
