Mindjourney前端工程师Cheng Lou开源了一个新项目，上线没几天GitHub星标就冲破11k，相关讨论在全网引发海量关注。不同于多数炫技demo，这个仅15KB的小项目，直接瞄准了网页UI领域被忽视30年的核心痛点。

不少人第一反应是“不就是文字排版？至于这么大惊小怪吗？”但深挖下去你会发现，这可能是网页UI范式转移的第一步。AI时代前端开发的瓶颈，从来不是模型能力，而是被DOM锁死的基础能力。这个小项目到底捅破了哪层窗户纸？

被DOM困住30年的排版死结

网页发展30年，3D动画、WebGL都已经玩出花来，可大规模文本排版一直是开发者挥之不去的噩梦。

传统网页文本测量，从头到尾都逃不开DOM Reflow：你想知道一段文字放进固定宽度的容器里会有多高，必须先把文本塞进DOM树让浏览器排一遍版，再调用API把结果读出来。

这个过程不仅慢，还没法并行计算，必须排队处理，一旦出现读写交错，页面直接卡成PPT。而Reflow，也一直是网页卡顿的头号元凶。

过去几十年，所有前端框架都在围绕这个痛点打补丁，却没人敢真的掀桌子——毕竟DOM是浏览器给的“标准答案”，脱离DOM做排版，在多数人看来就是离经叛道。

Cheng Lou偏不这么想。他直接绕开DOM，用纯TypeScript在用户态重新写了一套文本测量引擎，核心突破口其实很巧妙：

浏览器canvas.measureText和DOM渲染底层用的是同一套字体引擎，但canvas完全在布局树之外运行，测量多少次都不会触发Reflow。

Pretext先把每个文字片段用canvas测量一次，把宽度缓存下来，之后不管你怎么拉伸窗口、切换布局，排版计算全是简单的加减乘除，完全不需要再碰DOM。

为了匹配不同浏览器的渲染精度，Cheng Lou把Chrome、Safari、Firefox三大浏览器的真实渲染基准数据，全部喂给Claude Code和Codex，让AI在7680种不同容器宽度下反复迭代比对，整个优化流程跑了整整几周。

最终的测试结果，超出了所有人的预期。

性能数据超出想象 精度实现像素级匹配

公开测试数据显示，Pretext的性能提升，远远超出了“优化”的范畴，直接达到了数量级的飞跃：

这个速度意味着什么？哪怕同时处理数十万个文本框的滚动与缩放，Pretext也能稳定跑出120帧的丝滑体验，完全不会出现传统排版的卡顿掉帧。

精度方面，三大浏览器7680项穷举测试全部满分通过，实现了像素级吻合。哪怕是从右向左书写的阿拉伯文、韩语混排、平台特定的表情符号，全都能完美适配。

更让人意外的是，整个引擎压缩后仅仅15KB，比很多网页上的单张图片还要小。Django联合创始人Simon Willison评价：“Pretext巧妙解决了不碰DOM计算自动换行文本高度的痛点，这个问题困扰了开发者几十年。

解决了底层性能问题之后，那些曾经被CSS视为噩梦的排版需求，一下子变成了非常简单的事情。

全网玩疯 开发者脑洞已经收不住

项目开源之后，最精彩的部分其实不是大神的原始代码，而是全网开发者迸发的各种脑洞玩法。很多创意连Cheng Lou本人都直呼没想到。

最出圈的当属基于Pretext重制的经典同人视频《Bad Apple》，整个视频完全用文字流动实现黑白色剪影效果，搭配原曲播放，效果丝滑流畅，瞬间勾起了很多老网友的回忆。这个版本在上线之后迅速出圈，不少开发者熬夜研究实现逻辑。

还有开发者把超级马里奥、毁灭战士、打砖块等经典游戏直接塞进了文字排版里，用文字变化渲染游戏画面，一边玩游戏一边看文字，体验相当神奇。

教育领域的玩法更让人眼前一亮：有人把物理定律搬进文字排版，给重力、碰撞、弹性效果加上文字动效，枯燥的物理公式瞬间变得具象可感。用在儿童绘本上，文字可以围绕插画自动流动，翻页效果就像在玩互动游戏。

设计师Marius Hauken更是直接把文字玩成了流体，实现了文字沿着任意曲线自然流动的效果，放在网页banner上的视觉效果，堪称惊艳。

很多人看完这些demo，第一反应是“这不就是炫技吗？实际开发能用到吗？”但这个问题，其实恰恰找错了重点。

不只是炫技 这是UI范式转移的起点

不少人质疑Pretext除了做demo没有实际用途，还有人说苹果早在15年前就在iPad上实现过类似效果。但支持Pretext的开发者点出了核心区别：

• 苹果的Pages/Keynote是封闭原生应用，只能在Apple生态内使用
• Pretext是开源、纯TypeScript、全浏览器兼容的Web解决方案
• 任何前端开发者都能通过几行JS调用，实现CSS做不到的高性能动态布局

Cheng Lou本人其实早就点出了做这个项目的核心动机：文本布局与测量一直是解锁更有趣UI的最后一个、也是最大的瓶颈，尤其是在AI时代。解决了这个问题，我们就不再需要在GL落地页的炫酷效果和博客文章的实用性之间二选一了。

更值得玩味的是，Pretext的API从设计之初就特意做成了AI-friendly，专门适配AI编程助手的调用习惯。在AI逐渐成为开发主力的今天，这种设计思路本身就走在了行业前面。

Cheng Lou的履历其实也能印证这种判断：作为React核心团队早期成员、ReScript语言的缔造者、曾经的Facebook Messenger核心架构师，他从来不是为了炫技做项目。这次在Midjourney工作期间推出Pretext，本质上是在为AI生成UI铺路——解决了文本排版的性能瓶颈，AI才能真正生成复杂且流畅的动态网页。

现在的浏览器规范已经膨胀到了几乎不可能有新竞争者进入的程度，要从根本上实现UI性能和开发者体验的数量级提升，唯一的出路就是把更多能力交还给用户态。不再等CSS委员会讨论下一个十年的特性草案，开发者自己掌控排版，反而能迸发出更多可能性。

Pretext留下了一句话：“可验证软件的成本将趋向于零。”这句话放到今天来看，其实有了更清晰的解读：当底层基础能力的成本被降到足够低，创新的门槛才会真正打开，更多前所未有的UI形态才会出现。

我们这代前端开发者，已经习惯了在浏览器给的框架里修修补补。但总有人愿意跳出框架，捅破那层谁都看得见但没人敢碰的窗户纸。15KB的小项目改变不了整个行业，但它至少证明了一件事：原来网页排版还能这么玩，原来我们还能有别的选择。

接下来，会不会有更多底层UI能力从浏览器黑盒里走出来，交到开发者自己手上？AI时代的网页UI，最终会变成什么样子？这个问题，恐怕需要更多像Cheng Lou这样的“拆框人”来回答。

#人工智能##前端##Web##浏览器##UI设计#