JS排版引擎

元信息

• 目标：认识 2025 年走红的 Pretext 库——用纯 JavaScript 重新实现文本测量与排版，绕开浏览器的回流；由此体会"新的是实现，不变的是渲染流水线"
• 关键概念：回流（reflow，浏览器重新计算布局）、强制同步布局、布局抖动（layout thrashing，循环里读写交替迫使浏览器反复重算布局）、文本测量、排版引擎
• 关联阶段：cp4（呼应关键渲染路径）
• 常见误区：以为 Pretext 是完整的 CSS 排版引擎（它只做文本测量与断行，不实现盒模型那套布局）；以为绕开 DOM 排版是新思路（Canvas/SVG 手动排版一直存在，新的是把"测量"也搬出 DOM 还能保持浏览器级精度）

Pretext 是什么

Pretext 是 Cheng Lou（前 React 核心团队成员）2025 年开源的纯 JS 文本测量与排版库，npm 包名 @chenglou/pretext。演示视频走红后一周收获约 2.6 万 star，被业界视为前端排版方向的一次突破。在线演示

它解决什么问题：测一段文字，也要惊动整个布局

关键渲染路径讲过：布局（回流）是渲染流水线中代价最大的环节之一，JS 修改几何属性会触发"布局→绘制→合成"整段重跑。不光"写"会触发，"读"也一样——代码里调用 getBoundingClientRect() 之类 DOM 测量接口，浏览器必须先把布局算完才能回答，这叫强制同步布局（forced synchronous layout）。

典型痛点：动态内容的列表（聊天记录、评论流、虚拟列表）需要提前知道每段文字占多高。用 DOM 去量，要么一次次触发回流，要么在循环里读写交替造成布局抖动，内容越多页面越卡。

思路：测量一次，之后全是纯计算

Pretext 把排版拆成两步：

• prepare()：一次性测出每个文本片段的宽度，精度以浏览器自己的字体引擎为准，不是估算
• layout()：给定容器宽度，用纯算术算出行数、总高度、每行每个字符的坐标——全程不再碰 DOM 布局

由此衍生两个典型用法：

• 只要高度：不渲染就预知段落多高——虚拟列表精确估高、瀑布流排布、检测按钮文字是否溢出
• 手动排版：拿到每行的文本和坐标，自己画到 Canvas 或 SVG——文字绕图浮动、不规则逐行填充这类浏览器布局做不了或做不好的效果

意义与边界

排版一直是浏览器内部包办的部分（黑盒），Pretext 证明这个黑盒可以搬进 JS 并且保持浏览器级精度——而看懂它为什么值得绕开，靠的正是第 06 周的渲染流水线原理。

• 边界：只覆盖 white-space、word-break 等常见文本设置，不处理双向文本（从右到左的阿拉伯语与从左到右文字混排）的行内顺序
• 讨论：DOM 测量既然触发回流，为什么平时写页面感觉不到卡？（节点少时回流本来就快，代价随页面规模增长）
• 讨论：什么样的产品真的需要它，什么样的场景用 text-wrap: balance 这类新 CSS 就够了？