点击上方 前端Q关注公众号回复加群加入前端Q技术交流群一个 15KB 的库把 Web 文本布局从 50ms 干到 0.09ms还不碰 DOM。先说结论Pretext 是什么Pretext 是 2026 年 3 月底由 Cheng LouReact Motion、ReScript 作者现 Midjourney 工程师发布的一个零依赖 TypeScript 库只有 15KB。它做的事情一句话说清在不触碰 DOM 的前提下完成多行文本的测量和布局速度比传统方案快 300~500 倍。发布 48 小时内 GitHub Star 突破 14000X 上曝光超过 1900 万次。MIT 开源协议。它到底解决了什么问题Web 文本布局有个 30 年的老痛点你想知道一段文字有多高就必须把它塞进 DOM 里让浏览器算一遍。传统做法是调用getBoundingClientRect()或读offsetHeight但每次调用都可能触发布局回流Layout Reflow——浏览器不得不重新计算整棵渲染树的几何信息。这件事有多贵打个比方一个居民开了下前门整个城市得重新画一遍地图。在现代前端场景里这个问题尤其致命场景为什么痛聊天消息列表每条消息高度不同滚动时频繁测量导致卡顿Masonry 瀑布流卡片高度靠文字决定得先渲染再测量再定位页面跳AI 流式输出模型一边吐字一边要重排测量在热路径上反复跑多列编辑排版文字绕图、分栏、流式排版全靠 DOM reflow帧率直接掉虚拟滚动未渲染的元素高度只能靠猜滚动条来回跳Pretext 的核心洞察把文本布局从 DOM 里搬出来。用 Canvas 的measureText()API 做字体度量的地面真值剩下的全靠纯数学计算。不碰 DOM 节点不触发回流不阻塞渲染线程。核心原理两阶段模型Pretext 的设计非常优雅就两步▎阶段一prepare()—— 一次性预处理typescriptconst prepared pretext.prepare(text, {fontFamily: system-ui,fontSize: 16,// ...});这一步做的事情▸规范化空白字符▸文本分段word segmentation▸应用语言相关的粘连规则比如中文标点不能开头▸通过 CanvasmeasureText()测量各段宽度▸把结果缓存为一个不透明的数据结构500 段文字大概 19ms是一次性成本。▎阶段二layout()—— 纯数学的热路径typescriptconst height pretext.layout(prepared, {maxWidth: 320,lineHeight: 1.5,});这一步完全不碰 DOM只做加减乘除。500 段文字只要 0.09ms。因为是纯数学你可以在每一帧动画里重复调用窗口拖拽、物理模拟、实时重排都不会掉帧。▎进阶 APIAPI用途layout()返回段落高度layoutWithLines()返回每一行的详细对象walkLineRanges()遍历行宽范围用于紧凑气泡计算layoutNextLine()逐行布局支持每行不同宽度——这就是文字绕障碍物的关键layoutNextLine()是最有意思的你可以给每一行传不同的maxWidth文字就会自动绕着圆形、图片或任何不规则形状排布。这在印刷排版里是常规操作在 Web 上以前基本做不到。性能到底快多少直接看数据操作DOM 传统方案Pretext差距500 段文字高度计算~50ms0.09ms~500x单次 layout 调用触发 reflow纯算术无 reflow120fps 下每帧余量8.3ms0.09ms绰绰有余关键的不只是快而是快到改变了编程模型▸以前布局计算是异步的、昂贵的你得小心翼翼地批量操作、节流防抖▸现在布局计算是同步的、可预测的可以当一个普通函数随便调使用场景▎1. AI 聊天 / 流式输出界面AI 逐 token 输出时消息高度在不断变化。用 Pretext 可以在每个 token 到达时同步计算高度做到流畅滚动和动画不用等 DOM 渲染完再去量。▎2. 紧凑聊天气泡微信/Slack 那种气泡传统做法是先渲染、测量、再调宽度。Pretext 的walkLineRanges()可以直接算出保持相同行数的最小宽度消灭气泡右边的空白浪费。▎3. Masonry 瀑布流Pinterest 风格的瀑布流每张卡片高度不同。以前得隐形渲染→测量→定位三步走现在prepare()完直接预测高度不用渲染就知道每张卡多高。▎4. 文字绕障碍物排版杂志级排版效果——文字自动绕着图片、拉引框、装饰元素流动。用layoutNextLine()逐行传入不同宽度即可实现而且是实时的拖动障碍物文字会立即重排。▎5. 多列编辑排版类似 Medium 或报纸的多栏布局文字从一栏溢出自动流入下一栏配合拉引语和分隔元素。全程 0 次 DOM 测量。▎6. 虚拟滚动的高度预测长列表虚拟化的老问题——未渲染项的高度只能猜。有了 Pretext可以直接算出每一项文字内容的精确高度滚动条终于不跳了。语言和排版支持Pretext 不是只能处理英文▸所有语言脚本中文、日文、韩文、阿拉伯文等▸RTL从右到左文本▸双向混排同一行里有英文和阿拉伯文▸Emoji 和复合字素簇不会在 emoji 中间断行▸white-space: normal和pre-wrap模式▸制表符和硬换行保留渲染目标也不限于 DOM支持 Canvas、SVG服务端渲染在路线图中。社区反响发布一周内的疯狂 DemoPretext 发布后社区的创造力直接爆发作者Demo亮点yiningkarlliKnuth-Plass 排版算法把高端印刷排版的段落对齐算法带到 WebRiyvir飞龙穿越文字龙在文字块中飞行喷火时周围文字融化并被推开mhauken手机水平仪阅读手机倾斜时字母像物理对象一样滑落堆积TalsiachX Times AI 报纸用 Grok 分析内容Pretext 实时排版头版KaygeeartworksThree.js 鱼群 文字鱼在文字间游动文字实时物理响应LOliveirasousa阅读障碍辅助自定义字号和字间距优化器Vercel CEO Guillermo Rauch、Remix 的 Ryan Florence 等前端大佬都公开点赞。限制和注意事项Pretext 不是万能的使用前需要了解这些边界限制说明不处理渲染Pretext 只负责算不负责画。算完之后你得自己把结果渲染到 DOM / Canvas / SVG无障碍性需自行保障把布局从浏览器接管到用户态后可访问性Accessibility不再由浏览器自动处理需要开发者自己补 ARIA 属性等CSS 行为覆盖有限目前支持white-space: normal和pre-wrap不覆盖所有 CSS text 属性的细微差异需要专业认知这不是写 CSS 就完事了你需要理解排版原理字素、分词、BiDi 算法等浏览器字体度量差异不同浏览器的 CanvasmeasureText()可能存在微小差异Pretext 通过大量语料校准来保证像素级准确服务端渲染尚未支持SSR 在路线图中但还没发布新项目API 可能变动发布不到一周还处于早期阶段简单说如果你的场景不涉及频繁的文本高度计算或动态排版直接用浏览器原生能力就够了。Pretext 是给那些被 DOM reflow 卡住脖子的场景准备的。快速上手bashnpm install pretext一个最简单的例子——算一段文字在 320px 宽容器里的高度typescriptimport { prepare, layout } from pretext;const prepared prepare(这是一段需要计算高度的文字可能很长很长..., {fontFamily: system-ui,fontSize: 16,});const height layout(prepared, {maxWidth: 320,lineHeight: 24,});console.log(E6DB74文字高度: ${height}px);逐行布局、绕障碍物排版typescriptimport { prepare, layoutNextLine } from pretext;const prepared prepare(longText, fontOptions);let y 0;let line;while ((line layoutNextLine(prepared, {maxWidth: getWidthAtY(y), // 每行根据 y 坐标动态算宽度lineHeight: 24,}))) {renderLine(line, y);y 24;}更多 Demo 可以直接看官方演示页chenglou.me/pretext总结维度说明是什么15KB 零依赖 TypeScript 文本布局库核心能力不碰 DOM 完成多行文本测量和布局性能比 DOM 方案快 300~500 倍可在 120fps 下每帧调用作者Cheng LouReact Motion / ReScript / Midjourney适合聊天界面、AI 流式输出、瀑布流、编辑排版、虚拟滚动、文字动画不适合简单静态文本展示、不需要动态测量的场景状态2026.3 发布MIT 开源23000 StarAPI 可能还会演进Pretext 的意义不只是快了 500 倍。它真正改变的是文本布局从浏览器的黑盒操作变成了开发者可以自由调用的同步函数。30 年来 Web 文本排版第一次有机会追上印刷和原生应用的水平。参考资料▸Pretext GitHub▸Pretext 官方 Demo▸Pretext: The Tiny Library That Makes Web Text Layout 500x Faster▸Midjourney engineer debuts Pretext to revolutionize web design往期推荐Multi-Agent Teams让多个专家 Agent 像团队一样协作AI Agent 是怎么想一步做一步的拆解 ReAct 模式从零开始用 LangChain.js 构建你的第一个 Tool-Calling Agent最后点个在看支持我吧