转自新智元网页排版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面前全成了不值一提的小儿科。时长00:09值得一提的是这个引擎虽然只有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真正想说的。