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

长达三十年的网页排版难题, 终于被打破, 曾经被视为极度困难的枷锁从此不复存在。就在目前这个时候, 前端这个圈子内部, 是被一个叫做项目的东西, 给彻底给引爆了, 这个事情, 它是引来了有1600万个人, 都在进行疯狂的围观。它直接掀翻了统治网页长达30年的DOM渲染机制实现了此前被视为「不可能」的壮举——让文字可以跟着你选的形状自由地流动, 遇到分栏的时候会自动进行分配, 做多维度的排版也是非常顺滑和匹配。更让人感觉到恐怖的是, 可以让网页排版的运行速度飙升几百倍, 然后渲染出来的体验能够直接达到每一秒钟有一百二十帧这种极致的、非常平滑的感觉。这款爆火项目恰恰是出自前端工程师Cheng Lou之手。正如那位大神用原本的措辞所讲明的, 他声称自己是从地狱的最底层里艰难地爬出来的人, 并且, 他向大家表示, 他为大家带回了未来几年内, 在UI设计这个领域之中, 极其关键的基础要素中的其中一个。就在当下, 全网络的关注点都沉浸在一种视觉上的享受之中了。那些直接生成好的排版效果图样子, 非常漂亮, 漂亮到了让人感觉到这根本不像网页的样子。在评论区的下面这个位置, 那里头全部都是被人用惊叹的语气所淹没和刷满的情况发生了。那个火爆异常的项目, 它终结了UI领域存在了三十年的难以解决的核心困难。毫不夸张地说, 随着的正式出现, 那个在前端领域困住了人们的想象力长达30年之久的难题, 被亲手解开了。长期以来, 传统的文本测量这一事情是极度依赖于CSS和DOM这两个概念的, 其性能表现是很沉重的, 就像是铅块一样, 动不动就会出现卡顿的状况。在当今这个由浏览器所构成的天地里面, 3D技术、动画效果以及WebGL这些家伙, 是完全能够让使用者去尽情地玩转, 并且能够达到一种相当华丽、让人眼花缭乱的境界状态的。可是, 一旦涉及到对大量文字进行显示渲染这种操作, 开发者就要立刻停止之前的想法, 只能低声下气地向原本看不见的底层机制投降。假设你想知道一段话塞进300像素的框里面会有多高, 目前没有任何直接的办法计算。你必须把文本强行塞进DOM树, 让浏览器老老实实排一遍版, 再使用t函数把结果问回来。这个过程其实就是询问, 它被称作成为网页出现卡壳现象的那个排在第一位的罪魁祸首。不仅如此, 这一类测量工作是不能够同时并行开展的, 它必须是采取排队的方式来进行处理的。只要是一不小心, 就会导致读操作和写操作出现相互交错的情况, 那样的话, 系统性能就会直接面临崩盘的困境。为了解决这一难题, 大神Cheng Lou采用了一种最生猛的破局手段。放弃了那些现成的工具, 转而使用完全在用户态下自我研发的一套高精度的以及极速的文本测量引擎。完全不碰DOM, 也不求助于浏览器, 直接暴力计算。地址这其中的具体办法究竟是什么样的。Cheng Lou发现存在一条所谓的「后门」路径, 这是因为浏览器的.解析过程与DOM渲染机制, 在底层实际上共同依赖并使用了同一套字体引擎进行处理。但是存在一个巧妙之处, 那就是它完全在布局树的外面进行运行操作, 也就是说, 无论统计字数的次数是多少, 都永远不会触发相关的机制。其完整的一套逻辑框架, 实际上是建立在这个至关重要的突破口之上的。它先把每个字符的宽度量清楚, 然后把宽度数据缓存起来。这样不管后续你如何拉伸页面窗口或者切换布局样式, 排版计算的过程都只需要进行基础的加减运算, 彻底避免了复杂的几何分析操作。有来自网络的评论者用辛辣的语言进行点评, 指出这款产品被称为“新一代”, 并且在刚刚上线短短几天的时间里, 获得的星标数量就已经突破了1万一千个。为了把精度打磨到极致, Cheng Lou把各大 的「真实渲染基准」数据, 全部喂给了 Code和Codex。然后让它们对每一个关键的容器宽度进行测量, 并且进行迭代比对, 这个过程持续了好几周。令人万万没想到, 实验出来的结果竟然让所有人感到了极为强烈的震惊情绪。在精度方面, 针对三个主要浏览器, 我们进行了涵盖7680个项目的穷举测试。所有这些测试项目都圆满通过了考核最终得分均为满分结果。经过对比分析, 发现页面呈现内容与目标标准实现了像素级的精细吻合。性能方面的数据, 那个表现呢, 真是让人觉得特别厉害。在演示的过程当中, 它可以实现丝滑的帧率表现。这种表现足以去处理数量达到数十万个的文本框所进行的滚动操作以及与缩放相关的功能展示。不用进行对DOM的测量, 可视区域的检查简化成一次没有缓存的线性遍历来查看高度。它同时还能够使得聊天的气泡完美地去贴合那些文本的内容, 也就是它会自动地计算出最紧凑的那个包裹的宽度, 以至于绝对不会多出哪怕一个像素出来。这个能够把多行文本收缩包裹起来的功能, 在网页开发领域当中, 整整缺失了的时长达到了30年之久。除此之外, 我们还提供了具备动态响应式特征的多栏杂志风格版面设计功能, 支持使用可变更宽度的字体来呈现ASCII字符图形艺术形式, 同时也包含对富文本内容进行手工方式进行的精细化排版调整等多种选项。那些曾经让开发者感到头疼发指的困难局面, 例如自适应增高度的文本输入区域、能够折叠与展开的面板组件、多行文本内容的垂直水平居中显示效果, 以及仅依靠代码实现的多行文本渲染功能, 现在看起来都非常简单轻松。对于当前的技术水平而言, 它们已经不再是难以跨越的障碍, 而是显得微不足道且毫无挑战性的小问题罢了。这里要特别提起注意的是, 这个引擎虽然尺寸非常小, 仅仅只有十五千字节的大小, 但是它却对浏览器内部那些各种各样的稀奇古怪的特性和表现方式都非常了解。它支持各种语言, 这其中包括韩语, 从右向左书写的阿拉伯文, 以及针对各平台特定的表情符号。全网都在疯玩, 那些人的想法真是离谱到了极点。其实, Cheng Lou本人仅仅只是拉开了序幕, 而全网的那些开发者们去亲身操作并体验的那个过程, 他们的想象力发挥得简直到了无与伦比的地步。就算是这位父亲本人, 也是感到非常震惊和意外。有网友进行了实际的测试, 结果只需要0.04毫秒的时间, 就可以完成52种不同布局的生成。在这个文本里面, 咱们一起去看一看二次元热舞。有一大堆网友们, 直接在文字渲染的环节里头, 把人物动画那样的一种特效给搞出来了。以后的日子呢, 就是边看电影, 边看书。那个出自名为「辉夜姬」的作品里面名叫藤原千花的人物, 真的好像是跳进了文字当中去了。她那个标志性的舞蹈动作, 再加上实时在屏幕上流动变化的排版效果, 这简直就是把二次元的画面直接搬到了现实世界里面来一样, 可以说得上是极为震撼的存在了。那位在网上的人沉迷得太过厉害, 竟然熬着夜, 拼了命地赶工, 最终完成了一个版本的「Bad Apple」。把超级马里奥这个游戏, 直接塞进文字里面去进行游玩。有人还成功实现了超级马里奥这款游戏原本的视觉效果并且把原版的背景音乐同步加载进去, 直接开启高难度模式或完整体验。就连被称为“毁灭战士”的那个游戏, 也是有可能被成功地运行起来的。此外, 还包括打砖块、贪吃蛇等各式各样的那些游戏, 它们都能够用来进行一些能够打开想象空间的玩法。这位设计师直接将文字转化为了流体状的呈现形式, 其视觉效果只能用极其惊艳一词来加以形容。到底还有谁, 不是那么喜欢学习呢。有个人竟然把那种叫物理定律的东西直接给挪到了文字的排版设计里面去, 像什么重力、碰撞、还有弹性, 全都给用了进去, 结果那些原本看起来枯燥又乏味的计算式子, 一下子就在那块大尺寸的屏幕上面变得有具体的形象可以看了。如果把这个效果用到儿童绘本里头, 文字会绕着插画的图形打转, 然后用户一翻书, 那个感觉就像是在打游戏一样, 特别的有互动感。还有一大批疯狂的演示——就是站在巨人的肩膀上。那个能够把这样的话给写出来的人, 绝对不可能是那种普通的没有啥本事的一般人。程娄这个人的职业经历, 差不多就把前端技术发展的这一部分历史全部都串联起来了。他当过React那个框架的发明人, 他是/语言的那个制造者, 他还是前端的核心架构师, 现在他把Bun这个东西拿出来, 以此来支持整个UI体系。那把火的种子, 是在比其本人要来得更早的时段, 就已经存在着了。在十年之前, React核心团队的成员就曾经进行过一项操作, 他们开发出了一款名为text-的实验性质项目。使用文字塑形技术, 借助pdf.js里面的bidi算法来处理双向文本, 通过流式的方式逐行进行断行操作。那个整个系统的架构骨架部分, 全部都是源于这个地方的。在2016年的一场演讲活动里, Cheng Lou曾经讲过这么一句话, 如今还在被众人频繁引用。他的原话表达得比较绕弯子, 意思是说要克制自己去输出的冲动, 减少言语上的表达力, 这样的话, 反而能够获取到更强壮的力量。过了十年的时间之后, 他通过亲手去做验证这个行为, 证实了这一句话的正确性, 那就是如果把DOM给砍掉的话, 排版的自由度反而得到了提升。有一个核心成员留下了像是实验性火种一样的东西, 过了十年以后又迎来了另一个核心成员出现的情况, 最终使得那原本微弱的火源瞬间变成了规模巨大的熊熊大火。这句话仅仅是一个开始。在Cheng Lou看起来, 这事儿不仅仅是底层UI工程的一个那种作为基础的、关键性的突破, 这更是一次在架构的那个层面上发生的范式转移的事情。如今, 浏览器的规范本身已经发展到了一种规模, 这种规模大到让人类几乎看不到任何新的竞争者还有可能进入这个领域。想要从最基础的地方去做到界面性能和开发者体验获得一个超级巨大的进步, 目前看来, 只有一条路可以走, 那就是把更多的功能都交回到用户那一侧去——。使得开发者能够自主地对版面进行控制, 而不是继续去等待CSS相关的委员会聚在一起开会, 讨论关于下一个十年的特性草案。这意味着网页界面的设计样式, 以前是被那些CSS规则给限制住的, 现在要从这种传统的束缚当中解脱出来了, 然后要去走向一个能够让大家去发挥更多想象力, 而且是通过GPU渲染技术来实现的新时代了。那在Cheng Lou最后发布的那个名为.md的文件里面, 其实就只有一个字条, 也就是剩下了一句话。可验证软件的成本将趋向于零。或许, 这句话才是真正想要表达的意思。参考资料