【导读】前端圈变天了！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氪经授权发布。
