Products
96SEO 2026-05-09 06:07 33
每当我们在列表、聊天窗口或富文本编辑器里滚动时浏览器总会因为一次又一次的 getBoundingClientRectoffsetHeight 而“喘不上气”。这背后的根源——DOM 回流和重绘——往往让原本轻盈的页面瞬间变成卡顿的巨兽。于是一批「不想再和 DOM 打交道」的工程师开始探索：Neng否把文字宽高的计算搬到内存里用数学公式直接给出答案？答案是肯定的，而本文要聊的正是这条路上的明星选手——Pretext。
浏览器在渲染文字时会走一条完整的管线：
解析 CSS，找到对应的字体文件；
调用系统字体引擎渲染字形；
把每个字符放进排版引擎，算出每行宽度和高度；
把结果写回 DOM 树，再触发回流与重绘。
只要页面上出现了「读取尺寸」的操作，就会强制浏览器同步完成上面所有步骤。对数千甚至上万段文字Zuo一次测量，等价于让 CPU 连续跑几百次「字体渲染」循环——自然会产生卡顿。
二、Pretext 的核心思路：一次性预处理 + 纯算术运算Pretext 并不直接去询问浏览器「这个字有多宽」。它采用了两步走策略：
1️⃣ Canvas 预热——把所有字符宽度缓存起来借助离屏 ，库在首次使用时遍历目标字体下可Neng出现的字符，将每个字符绘制到画布并读取像素宽度。这个过程只执行一次随后所有后续计算douKe以直接查表。
有了字符宽度表后库只需要遍历字符串、累计宽度、判断是否超出容器宽度，然后生成行信息。整个流程没有任何 DOM 操作，只是几次加减乘除，速度快得惊人。
三、API 快速上手 —— 从准备到渲染只需三行代码
prepare
负责把原始文本和字体信息包装成一个不可变句柄。内部完成字符宽度缓存。
layout
接受句柄、容器宽度以及行高，返回总高度、行数以及可选的每行细节。
walkLineRanges
Ru果你想逐行执行自定义逻辑，这个迭代器Ke以帮你一步步遍历。
// 示例：获取段落总高度和行数
import { prepare, layout } from '@chenglou/pretext';
const text = '前端性Neng优化从来不是一句口号，而是一场持久战。';
const font = '16px "Inter", sans-serif';
const lineHeight = 24; // 与 CSS 中保持一致
// 第一步：准备
const handle = prepare;
// 第二步：布局
const result = layout;
console.log;
| 场景 | 传统方式 | Pretext | 提升率 |
|---|---|---|---|
| A. 虚拟列表 10k 条文字，每条 120 字符 | 842 | 4 | ≈210× |
| B. 聊天气泡动态高度计算 | 73 | 0.31 | ≈235× |
| C. 富文本编辑器实时换行 | 1289 | 6.7 | ≈192× |
Ke以kan到，即使在极端数据量下单次 layout 调用仍然保持在毫秒级别，而首次 prepare 的开销只相当于一次完整字符表构建，一般情况下完全Ke以接受。
当前高度 {{ totalHeight }}px / 行数 {{ lines }}
{
const h=prepare;
const r=layout;
setSize;
},);
return (
