前 React 核心成员 Cheng Lou 在推特上甩了一个链接:「我写了一个 15KB 的排版引擎,叫 Pretext。」 配图是一段文字绕着不规则形状流动的视频。评论区炸了:「这效果以前只能用 canvas 画,性能还稀烂。」「怎么做到的?」 第二天,项目 GitHub 星数破万。第三天,破两万八。一周内,Hacker News、Reddit、Twitter 全在讨论。一个 15KB 的库,怎么就让整个前端圈沸腾了?
一、故事的起点:前 React 核心成员的 「业余项目」
Cheng Lou,这个名字在 React 早期社区很响亮。他贡献过核心代码,也做过著名的 「时间旅行」 演讲。后来他淡出了主流视野。大家都以为他在享受生活。结果他憋出一个大招:一个 15KB 的排版引擎。
为什么这件事让社区这么兴奋?因为排版——文字如何换行、环绕、对齐——是浏览器三十年来的 「硬骨头」。你滚动页面、调整窗口大小、打开一个复杂布局的网页,背后都在进行昂贵的排版计算。浏览器用的方法是 「回流」:把文字放进 DOM 里,问浏览器 「你的宽度是多少?」,浏览器只好重新计算一遍布局,整个过程同步、阻塞、性能差。
二、传统排版为什么慢?
简单说,浏览器排版是一个 「黑盒」。你给它文字和宽度,它给你一个 「换行位置」。但这个计算过程是同步的,涉及到字形度量、上下文、连字等复杂因素。而且,每次你改变文字内容或容器大小,浏览器都要重新算一遍。这就是为什么复杂排版会卡。
三、Pretext 的思路:绕过 DOM,用数学计算
Pretext 的核心思想很简单:不在 DOM 里排版,在 Canvas 里算。它利用 Canvas API 直接测量文字宽度 (measureText),然后用算法自己决定在哪里换行、在哪里对齐。这个过程不触发回流,不阻塞主线程。而且,它把计算结果缓存起来,相同的文字和容器宽度直接复用。
最惊人的是性能对比。Cheng Lou 在发布会上演示:同样的复杂排版,传统方法在 Safari 下耗时约 150ms,Pretext 只要 0.12ms,快了一千两百多倍。其他浏览器也快了数十到上百倍。
四、AI 的角色:不是写代码,是 「调参」
Pretext 的代码量不大,大部分逻辑是 Cheng Lou 自己写的。但他用 AI 做了一件更有趣的事:浏览器兼容性调试。不同操作系统、不同浏览器、不同字体下,measureText 的返回值有微小差异。Cheng Lou 写了一个脚本,让 AI 自动在 Chrome、Safari、Firefox、Edge 的 Windows、macOS、Linux 版本上运行测试,收集了 7680 组数据,然后让 AI 分析差异并生成修正系数。他说:「如果没有 AI,这个项目可能要再花半年时间调参数。」
五、社区反应:从 「这能干啥」 到 「我也可以」
Pretext 发布后,社区很快分成了两派。质疑派说:「这只是个 demo,不能用在实际项目。」 支持派则开始疯狂创作:有人用它实现文字围绕任意形状 (手绘的曲线、SVG 路径);有人做了多栏杂志布局,滚动丝滑;还有人把 Pretext 嵌入到实时聊天室,每一条新消息都能动态重排,不掉帧。
最有趣的是一个开发者用它实现了一个 「流动的诗歌」 页面:文字像溪水一样沿着屏幕上的波浪线流动,鼠标拖动改变形状,文字实时重新排版。这在以前几乎不可想象。
六、对前端的意义:创新不只 AI
Pretext 的爆火,折射出 2026 年前端圈的一种情绪:大家有点腻了框架大战、AI 生成代码、效率工具。当 Cheng Lou 拿出一个 15KB、无依赖、硬核性能优化的库时,大家发现:前端还能这么玩。它不依赖 React、Vue、Svelte,不依赖 AI 生成页面,就是对底层能力的一次极致挖掘。
这也提醒我们:在 AI 能写出 80 分代码的时代,人类工程师的竞争力在哪里?可能是定义问题、设计算法、解决那些 AI 搞不定的极端情况。Cheng Lou 没被 AI 取代,反而用 AI 加速了自己独特想法的实现。
七、最后:你会用它吗?
Pretext 目前还不是生产级的方案,缺少滚动虚拟化、无障碍支持等。但它的思路已经启发了一批开发者。有人开始尝试把它集成到 Next.js 里,有人写了一个基于 Pretext 的 Markdown 渲染器。Cheng Lou 本人也表示,会持续维护,目标是成为一个真正可用的排版引擎。
至少,它让我们看到:浏览器还没被挖透,前端还有创造的空间。









