一觉醒来网页排版提速500倍？这个开源项目有点狠。

一觉醒来，全球网站文字排版能力提升 500 倍？

没错，藤原书记都能站在文章里开始跳舞了，关键这些动起来的文字还不是动画，是网页实时渲染的。

不止如此，还有游荡在文字之间的火龙，满屏乱蹦的弹力球，以及字符组成的旋转甜甜圈等等。

一时间，大伙儿好像又回到了那个博客盛行的年代，开始鼓捣起了自己的 “QQ 空间”。

这一切的背后其实是一个 3 天 2000 万浏览量的开源项目：Pretext，出自前端开发者 Cheng Lou 之手。

据说，用这个项目去做浏览器的文字排版，能够提升近 500 倍的效率，直接鸟枪换炮，哦不，是换离子轨道炮了。。。

世超也是第一时间上手搓了个 Demo 试了试，你别说，还真有点东西。

这里咱直接参考 Pretext 库的接口，做一个以文字为交互元素的网页小游戏。

设想是一个黑洞，一个白洞，在满是文字的世界里，黑洞能吸文字变大，白洞能射击击落文字。

很快啊，就搓出来了，大小也是非常 mini，不到 30KB。

从效果来看，确实非常丝滑，即使字符数量增多也能很流畅的渲染，尤其是切换白天黑夜模式时的重新渲染，以及拖动窗口时的物理碰撞，都没有一点点的卡顿。

这么说吧，跑到 60 帧是这台屏幕的上限，不是 Pretext 的。

接下来，作为对比，世超也拿传统方式做了个基本一样的例子，实现方式用的是 CSS 和 DOM 。

很明显啊，看着虽然差不多，但实际上动作复杂点，或者切换个模式，帧率就会直接从满帧 60 腰斩到 30 左右了。

原因也很简单，就是传统的 DOM 模式渲染文本时需要反复重排，而 Pretext 分离了计算和渲染，更加高效。

具体来说就是 Pretext 直接绕过了重复的过程，先调用 Canvas 中的一个函数，把所有文字的像素大小和位置提前计算一遍，轮到排版的时候直接加减就行了。

如果说之前排版就像挤地铁，每次变动都得挤一遍，那 Pretext 的思路就是排座位，提前预定好每个字符的大小位置，排版时进行一次优雅的组合计算就行了，效率可不就碾压了。

就这样，Pretext 节省的大量计算资源给社区的大伙儿提供了充足的整活空间。

在这里，你甚至可以玩到字符版的 DOOM，由字符组成的地图，角色，枪械，乃至射击反馈都能流畅运行。

不愧是能塞进卡西欧计算器的游戏，强强联合了属于是。

除了平面排版，带 3D 模型的空间排版也不在话下，因为 Pretext 提前计算了文字大小和位置信息，处理起来非常灵活，可以随时和模型的空间信息对接，并不局限于 2D 的平面。

除此之外，交互其实是最能体现这种性能优势的。

因为有了多出来的计算资源，就可以把大量的文字变成可操作的粒子，能够根据互动做出不同的反馈效果，就像下面这样，字符成了流体，随着手机晃动而流动。

当然，以上这些看着略显花哨的视效其实之前也能做到，就比如下面这种拿老技术做的文字浪潮，就效果来看也不输上面。

而且社区里面也有一些不同的声音，在担忧这个项目可能并没有看起来那么有用。

那这么说，Pretext 还是噱头太大了么？

那倒也不至于，因为无论是 Demo 还是社区的整活儿，都不是为了实用，而是为了展示项目能力和性能，秀肌肉用的。

放到日常使用的场景，跟咱密切相关的，就是可以让阅读体验变得更加丝滑。

通过下面这组文本渲染的对比就能看出来，Pretext 1 毫秒干完的活儿交给传统的 DOM 得几十毫秒。

所以，今天动辄几千字就卡顿的滚动可能真会成为历史，因为按着这种思路，哪怕页面上几万甚至几十万个文本挤在一起，也不会轻易卡成 PPT 了。

再比如，对于下面这种像传统报纸一样的排版方式，传统的方法其实需要很多细节微调，很难做到像 Word 一样让文字自然的环绕图片，或者更加动态的排版。

但采用了 Pretext 这种方法，就可以利用之前计算好的大小数据进行位置信息的计算，很轻便地产出合适的排版效果。

更何况，有了更高效的文本渲染引擎，会降低很多文本编辑应用的开发门槛。

比如这个简历编辑器，作者开发时就能更专注于功能设计，而不必花大把精力去优化排版的性能开销。

值得一提的是，无论是 Pretext 项目，世超的 Demo，还是上面的诸多展示，都大量运用了 AI 作为辅助。

大伙儿的使用方式可能有所出入，但这东西确实能在一些小的地方派上用场。

比如 Cheng Lou 的做法就是同时指挥两个模型（Claude 和 Codex）一起工作， 等到运行完，再互相检查各自的解决方案，最后自己手动整理。这对于一些拉丁语，日语等文字的繁杂适配工作有着非常大的帮助。

而在最近的 GitHub 热榜中，其实也总能在第二位的贡献者那看到 Claude 的身影，不得不说这东西基本融入开发流程了。

但话说回来，现在的 Pretext 其实还有很多不足，比如一些场景只支持指定字体，排版算法还相对简朴，以及很多设备适配上还存在不少 BUG。

但是，它也确实铲动了之前那座坨屎山，毕竟每次变动都得重排的逻辑还是有点儿抽象。

而反观 Word 和苹果 Pages等，早在多年前就已经推出了类似的动态功能，优化得都不错。作为互联网的一大入口，网页端的升级还是有点慢了。

当然，世超还是希望这种基础性的优化多来点儿，毕竟现在电子配件都在涨价，节省点资源也好让手里的硬件多战几年不是。

对了，差友们如果有兴趣，这是那个网页对比 Demo 的链接（或者点击下方“阅读原文”复制到浏览器打开），大伙可以自己玩玩看，区别还挺大的：

https://xpin-pretext.sothco.eu.org

撰文：风华

编辑：早起 & 江江 & 面线

美编：焕妍

图片、资料来源：

X，GitHub，Youtube，dearlarry.co