前端圈沸腾，Claude造出15KB引擎，渲染狂飙1200倍：文字里能跑马里奥

【导读】前端圈变天了！Midjourney大神出手，开源Pretext一夜爆红，成网页排版救星，彻底终结UI三十年难题。如今，全网1600万人围观，彻底玩疯。

网页排版30年「地狱级」枷锁告破！

今天，前端圈被一个名为Pretext的项目彻底引爆，引来1600万人疯狂围观。

它直接掀翻了统治网页长达30年的DOM渲染机制，实现了此前被视为「不可能」的壮举——

文字随任意形状自由流动、跨栏自动分配、多维排版丝滑适配

更恐怖的是，Pretext让网页排版速度飙升数百倍，渲染体验直达120帧极致丝滑。

这款爆火项目，恰恰是出自Midjourney前端工程师Cheng Lou之手。

用大神的原话来说，「我刚从地狱深处爬出，给你们带回了未来数年UI设计最重要的基石之一」。

此时此刻，全网都沉浸于Pretext的视觉盛宴中。那些直出排版的demo，美得根本不像网页。

评论区下方，全被惊叹体刷屏了。

爆火Pretext项目，终结UI三十年困局

毫不夸张地说，Pretext的出世，亲手解开了那个困住前端想象力整整30年的死结。

一直以来，传统的文本测量极度依赖CSS、DOM Reflow，性能沉重如铅，动辄卡顿。

在浏览器世界里，3D、动画和WebGL可以玩得天花乱坠。

可一旦触碰大规模文本渲染，开发者就得瞬间「熄火」，卑微地向DOM黑盒妥协。

假设你想知道一段话塞进300px的框里有多高？没有任何办法直接算出来。

你必须把文本强行塞进DOM树，让浏览器老老实实排一遍版，再用getBoundingClientRect()把结果「问」回来。

这个询问的过程，就叫做——Reflow，成为网页卡顿的「头号元凶」。

而且这种测量没法并行，必须排队处理。一不小心就造成读写交错，性能直接崩盘。

为了解决这一难题，大神Cheng Lou采用了一种最生猛的破局方式——

抛弃现成的工具，用纯TypeScript在用户态自研了一套高精度、极速文本测量引擎。

不碰DOM，不求助于浏览器，直接暴力计算。

GitHub地址：https://github.com/chenglou/pretext

怎么做到的？

Cheng Lou找到了一条「后门」：浏览器的canvas.measureText()和DOM渲染，底层用的是同一套字体引擎。

但canvas有个妙处——它完全在布局树之外运行，量多少次字都不会触发Reflow。

Pretext的整套逻辑就建立在这个突破口上。

它先用canvas把每个文字片段量一遍、宽度缓存住，之后不管你怎么拉伸窗口、切换布局，排版计算全是加减乘除。

网友辣评：Pretext是「新一代OpenClaw」，上线不过几天GitHub星标冲破11k

为了把精度打磨到极致，Cheng Lou把各大浏览器「真实渲染基准」数据，全部喂给了Claude Code和Codex。

然后让它们在每一个关键的容器宽度下进行测量和迭代比对，整个过程跑了好几周。

没想到，实验结果令人震惊。

精度方面，Chrome、Safari、Firefox三大浏览器7680项穷举测试，全部满分通过，像素级吻合。

性能数据更是炸裂。

• 在Chrome上，Pretext的layout()耗时0.09毫秒，而传统DOM交错测量耗时43.50毫秒，快了483倍。
• Safari上更夸张，layout() 0.12毫秒，DOM交错测量149.00毫秒，快了超1242倍——整整三个数量级。

演示中，它能以120fps的丝滑帧率，处理数十万个文本框的滚动与缩放。

不需要DOM测量，可视区域检查被简化成了对高度的单次、无缓存线性遍历。

它还能让聊天气泡完美贴合文本内容——自动算出最紧凑的包裹宽度，不多一个像素。

这个多行文本「收缩包裹」的能力，Web上缺失了整整30年。

还有动态响应式的多栏杂志布局、变宽字体的ASCII艺术、富文本手动排版等等。

那些曾经是CSS噩梦的挑战——自适应增高的文本域、折叠面板、多行文本居中、纯Canvas多行文本渲染，如今在Pretext面前，全成了不值一提的小儿科。

值得一提的是，这个引擎虽然只有15KB，却深谙浏览器的各种怪异特性（quirks）。

它支持各种语言，包括韩语、从右向左书写的阿拉伯文，以及各平台特定的表情符号。

全网玩疯，脑洞逆天

大神Cheng Lou只是开了个头，全网开发者上手试玩的脑洞，那才叫一个绝绝子。

就连Pretext之父本人都惊呆了

网友实测，仅需0.04毫秒，即可完成52种布局。

文本里，看二次元热舞

一大批网友直接在文字渲染中，做出了人物动画的效果。以后，一边看电影，一边看书。

「辉夜姬」里的藤原千花跳进了文字里，标志性的舞步配上实时流动的排版，堪称是二次元照进了现实。

网友太过沉迷，熬夜爆肝了一个Pretext版的「Bad Apple」。

超级马里奥，塞进文字里玩

还有人做出了「超级马里奥」游戏的效果，再配上背景音乐直接开大。

「毁灭战士」也可以成功跑起来。

还有打砖块、贪吃蛇等各种游戏开脑洞的玩法。

设计师Marius Hauken直接把文字玩成了「流体」，效果只能用惊艳形容。

谁还不爱学习啊

有人把物理定律搬进了文字排版，重力、碰撞、弹性，枯燥的公式瞬间在屏幕上具象化了。

在儿童绘本上应用这个效果，文字围绕插画流动，翻页就像在玩游戏。

还有一大批疯狂的演示——

站在巨人肩膀上

能写出Pretext的人，绝非等闲之辈。

Cheng Lou的履历几乎串起了半部前端进化史。

作为React Motion的创造者，ReasonML/ReScript语言的缔造者，Facebook Messenger前端的核心架构师，他如今正在Midjourney用Bun撑起了整个UI体系。

但Pretext的火种，比他本人更早。

十年前，React核心团队的Sebastian Markbage就写过一个叫text-layout的实验项目——

用canvas measureText做文字塑形、借pdf.js的bidi算法处理双向文本、流式逐行断行。

Pretext的架构骨架，全从这来。

Cheng Lou在2016年ReactEurope的演讲里说过一句至今被反复引用的话：减少表达力，反而能获得更大的力量。

十年后他亲手验证了这句话——砍掉DOM，排版反而自由了。

一个核心成员留下的实验性火种，十年后被另一个核心成员点燃成熊熊大火。

这还只是起点

在Cheng Lou看来，Pretext不仅是一个底层UI工程的基石级突破，更是一次架构层面的范式转移。

如今，浏览器规范本身已经膨胀到了几乎不可能有新的竞争者进入的程度。

要从根本上实现UI性能和开发者体验的数量级提升，唯一的出路就是把更多的能力交还给用户态——

让开发者自己掌控排版，而不是继续等CSS委员会开会讨论下一个十年的特性草案。

这预示着网页UI将从传统的CSS束缚中解脱，迈向更具想象力的Canvas/GPU渲染时代。

而Cheng Lou在thoughts.md的最后，只留了一句话：

可验证软件的成本将趋向于零。

这句话，或许才是Pretext真正想说的。

参考资料：

https://x.com/andrewjiang/status/2038273711237984564?s=20   

https://x.com/_chenglou/status/2037713766205608234?s=20  

https://x.com/birdabo/status/2038219452337074677?s=20 

本文来自微信公众号“新智元”，编辑：桃子 好困 ，36氪经授权发布。