从 pretext 看 AI 如何带给前端开发新典范

这两天在网页前端开发圈最热门的话题，莫过于 pretext 这个协助做多行文字排版的开源项目。作者公开分享后的第三天，GitHub 上已经超过一万五千颗星，原作者贴文超过一千九百万次浏览。在社区里，也能看到非常多基于 pretext 做出来的炫酷展示。

很多人看到这些展示（例如截图是原作者最早发布的贴文，可以看到当画面中的球位置变化时，环绕文字会跟着改变位置），可能第一反应是：“这不是原本的技术就做得出来吗？”那 pretext 这个开源库到底提供了什么额外价值？

虽然在不用 pretext 的情况下，前端工程师也可以直接调用浏览器的 DOM API（例如 getBoundingClientRect）拿到相关信息，再去调整文字排版，但这种做法可能会让浏览器同步重新计算布局（俗称 reflow），这会给浏览器性能带来很大负担，尤其是在页面元素很多的时候。

当浏览器 CPU 忙着计算页面中不同元素的宽高和间距时，在计算期间可能无暇处理其他任务。比如用户点击按钮，可能需要等一阵才有响应，因为浏览器腾不出资源处理，进而伤害用户体验。对 reflow 感兴趣的读者，我们把之前写过的技术文放在下方留言。

pretext 的突破之处

pretext 这个项目的突破在于，它提供了函数，让前端开发者不用调用 DOM API，也能计算多行文字高度，从而实现动态排版，同时又不会触发回流，也就不会造成浏览器卡顿。因此，社区里那些炫酷展示的看点，不是“既有技术能不能做出来”，而是“能非常流畅地做出来且不卡顿”。

进一步说，pretext 让前端工程师可以在画面实际渲染之前，就先知道文字排版结果。这让很多原本难做的 UI 变得容易很多，从虚拟化列表、自适应宽度组件到文字环绕动画，都能用比以前更简单的方式实现。

在理解 pretext 做了什么之后，有一个我们觉得最值得讨论的点，就是“为什么这个项目现在才出现？”或者换个角度问：pretext 只是个 TypeScript 库，本身没有依赖任何近期才出现的东西，那为什么以前没人写类似的库？

过去之所以没有，是因为要把这件事做好非常麻烦。不同语言在文字处理上有非常多细节，很容易出现各种意想不到的极端案例（edge case），让排版直接崩掉。过去也看过利用 canvas 的 measureText 库和一些排版计算方案，但都没有达到 pretext 这种程度。

如果要做到像 pretext 这样，能处理多语言的断句规则、混合语言排版（例如同时有从右到左和从左到右的句子）、Emoji，然后还要兼顾 Chrome、Safari、Firefox（UI 因为换浏览器崩掉，是很多前端开发者的痛），需要处理极其大量的细节。这些细节多到 pretext 作者用“从地狱爬回来”来形容。

AI 协助测试极端案例

而作者之所以能顺利从无止尽的极端案例地狱里爬出来，关键正是 AI。作者 Cheng Lou 分享，他通过 Claude 和 Codex 建立了一个让 AI 跑验证的循环：在不同案例下，对比浏览器实际渲染结果；如果某个案例没通过，就让 AI 去修正排版算法。你如果去看 pretext 源码，会发现每个浏览器对应的测试案例都有七千多个（总计七万多行）。这场极端案例地狱，并不是作者一个人硬扛，而是 AI 一起帮忙爬出来的。

AI 帮忙处理各种让人类觉得麻烦的案例，让好想法最终得以落地，也让网页前端开发的文字排版有了新典范。看完 pretext 作者的分享，我们并不觉得 AI 在取代前端工程师，反而更像是 AI 在帮工程师解决那些人不想做、但又必须做的苦差事。

备注：如果你对用 AI 协助开发感兴趣，我们最近推出了《AI Coding 从实战到最佳实践》线上课，从实战延伸讲解哪些最佳实践能帮助大家在使用这些 AI 工具时，以更精准、更高效且更节省成本的方式把开发做得更好。感兴趣的读者，欢迎加入 E+ 观看（链接）