一个人用AI写的小工具,撼动了网页排版三十年的老规矩

张开发
2026/5/9 20:40:38 15 分钟阅读
一个人用AI写的小工具,撼动了网页排版三十年的老规矩
你每天上网打开的每一个网页文字出现在哪里、图片放在什么位置、拖动窗口时一切怎么重排背后都靠一个上世纪九十年代设计的老系统在运转。它叫“DOM排版”已经工作了三十年。对静态页面来说它够用但面对今天越来越动态的网页它有一个致命的毛病每次需要知道一段文字有多高、在哪断行浏览器就得暂停手头所有事情重新测量一遍。这个过程叫“布局回流”相当于你每次想知道房间能不能塞下一张沙发都得打电话叫物业派人来量一遍房间——而你自己没有尺子。3月27日Midjourney工程师Cheng Lou在社交平台X上宣布了一个开源项目Pretext。这是一个只有15KB的TypeScript库不依赖任何第三方代码却号称能让网页文字排版快上五百倍。更让人意外的是它不是某个大公司团队的产出而是Cheng Lou一个人借助OpenAI的Codex和Anthropic的Claude这两个AI编程工具在数周内完成的。不过Cheng Lou也并非无名之辈——他曾在Meta参与React框架开发后来打造的react-motion动画库在GitHub上拿到了两万一千多颗星现在负责Midjourney的前端架构。Pretext发布不到一周GitHub星标就突破了六千八百。自己造一把“数学尺子”Pretext的核心思路非常简洁既然向浏览器“借尺子”太慢那就自己造一把。它把排版分成两步。第一步只做一次利用浏览器内置的Canvas绘图引擎测量每个字符的宽度和间距大概需要19毫秒人几乎感觉不到。第二步才是关键——拿到这些基础数据后之后每次需要重排文字Pretext完全不碰DOM而是用纯数学运算推算每个字符该出现在哪里。这就像你第一次量好了房间的精确尺寸并画了张平面图以后再想知道家具能不能塞进去直接在平面图上用铅笔比划就行了不用再跑回房间。500个文本块的重排只需0.09毫秒大约是传统方式的五百分之一。Cheng Lou本人也坦承这个对比“不太公平”因为没算初始测量的那19毫秒——但对于需要每秒重排六十次以上的动态界面来说第一步只做一次第二步会被执行成千上万次这个提升仍然是质变。开发过程中最难的不是写数学公式而是让自己造的尺子和浏览器的官方尺子量出一模一样的结果。不同浏览器对字间距、换行、中英文混排的处理方式都不同边界情况极多。Cheng Lou的做法是把AI当成不知疲倦的测试员反复让Claude和Codex写排版逻辑再拿输出与Chrome、Safari、Firefox的真实渲染结果逐像素对比发现差异就修改重试。测试语料包括《了不起的盖茨比》全文和多语言数据集。这种工作量如果靠人工可能需要一个团队忙上数月借助AI编程工具一个人数周就完成了。谁真正需要它Pretext不是来取代所有网页排版的。一个普通博客、一个公司官网、一个静态新闻页现有的CSS和DOM完全够用引入Pretext反而多此一举。它真正大显身手的地方是那些文字需要高频重排的动态场景。聊天页面成百上千条消息飞速涌入在线编辑器里多人同时打字导致文字不断重排虚拟化列表需要展示海量数据却只渲染可见部分——这些场景下传统方式的卡顿非常明显而Pretext能把瓶颈直接消除。数字出版领域同样受益杂志风格的多栏排版、文字围绕图片实时流动的效果以前在浏览器里要么做不到要么做到了也卡现在有了轻量级的解决方案。社区的反应印证了这一点。发布72小时内有人实现了Knuth-Plass段落对齐算法——一种以前只有专业排版软件才有的高端印刷技术有人做了手机倾斜时字母像物体一样“滑落”的实验甚至有人做了边看电影边读原著的网页应用所有文字都能实时交互。批评者说这些演示让文字根本没法正常阅读但支持者认为这只是在试探新能力的边界——项目才发布不到一周而已。和现有方案比新在哪过去也有人尝试绕开DOM的排版瓶颈但大多依赖WebAssembly体积大、集成复杂或专门的字体解析库增加维护成本要么就把计算扔给服务器增加延迟。Pretext完全不同纯TypeScript加数学运算15KB零依赖借Canvas API获取字体信息后就彻底脱离DOM。而且它不是一个“排版框架”只是一个极度专注的“文字定位计算器”——只负责告诉你文字该出现在哪些坐标至于怎么渲染随你决定。这种设计让它可以无冲突地嵌入几乎任何前端项目。说到底Pretext能不能真正改变网页排版的未来现在下结论还太早。文档还不完善生态从零开始“大多数网站根本不需要这个”的质疑也有道理。但对于那些确实需要极致文字排版性能的场景它提供了一个前所未有的选择。而一个人借助AI工具在几周内就做出了这样的基础设施这件事本身可能比Pretext更值得关注——它在重新定义“一个人能做到什么”的上限。END本文来自至顶AI实验室一个专注于对AI计算机、工作站及各类AI相关硬件设备开展基于真实使用场景评测的研究机构。‍

更多文章