前端大神 Cheng Lou 开源新项目Pretext ，获两千万人围观！前端要进入“无 CSS 时代”了

上周末，整个 AI 圈讨论度最高的，必是前端大神 Cheng Lou 开源的新项目——Pretext。

一个把前端文本能力从“受 CSS 奴役”中解放出来的里程碑式项目。

短短两天内，Cheng Lou 发布的这篇帖子，在 X 上获得了 1900 万的围观，GitHub star 数已经破 2 万。

项目指路：https://github.com/chenglou/pretext

热度不仅来自他自身——这位曾在 React、Midjourney、ReasonML 、ReScript 等核心团队工作过的前端传奇开发者，还有他此次带来的这个新项目，强到令人咋舌——

• 纯 TypeScript 编写，仅 15KB 大小，零依赖；
• 完全绕过 DOM，直接在用户代码层精确测量文本；
• 支持所有语言（包括韩语、阿拉伯文混排，甚至 emoji 表情等），且适配不同浏览器的差异；
• 性能比传统 DOM 测量快 500 倍；

解决前端圈长达 30 年困扰的“最后一块拼图”，就这样诞生了。

传奇般的横空出世

引用 Cheng Lou 的原话：

在 AI 时代，文本布局和测量是解锁更有趣的用户界面的最后一个、同时也是最大的瓶颈。

长期以来，前端开发者不得不在实用的性能和排版的美观之间反复妥协。想做炫酷界面，就得牺牲完美的文本排版，而做普通博客，就只能用 CSS。

在这样的背景之下，Cheng Lou 下定决心开发一个只通过暴力计算来解决大规模文本渲染的高精度文本测量引擎。

为了 Pretext 的诞生，他开玩笑称自己经历了“地狱般的挣扎”。

Cheng Lou 通过把浏览器的真实测量结果喂给 Claude Code 和 Codex，让它们在不同容器宽度下反复测量和迭代，花了好几周时间，终于跑完了整套流程。

可以让前端脱离浏览器排版系统，用代码自己计算文字和布局，从而获得更高性能和更强控制力。

这个瓶颈被解决，不用再二选一了。AI 生成的复杂的动态界面，可以同时拥有炫酷的美感和实用的文本布局。这相当于给前端开发者开了一扇新世界的大门。

Cheng Lou 在评论区用视频展示了 5 个 demo，都很有意思。我们通过解析这些 demo，来直观感受一下 Pretext 的威力所在。

Demo 1  动态高度虚拟化测试

先来看第一个 demo。

视频里给我们展示的是用 Pretext 实现超大规模“虚拟化列表 + 不同高度文本块”的流畅渲染。

实时体验链接：https://chenglou.me/pretext/masonry/

上面的网页密集排列着几十万个文本卡片，文字量和卡片高度均不相同。

传统虚拟化列表遇到这种情况时，需要不断调用 DOM 测量高度，让浏览器反复重排，进而导致严重卡顿。

但是在视频里，我们可以看到当鼠标疯狂上下滚动、快速拖动，甚至窗口缩放时，整个页面依然保持丝滑的 120fps。

这就体现了 Pretext 的强大之处：它完全不需要 DOM 测量，在用户代码层提前精确算好了每个文本块的高度。所以只需要一次线性遍历高度数组，就能判断哪些卡片需要显示或隐藏，页面始终保持流畅。

Demo 2 ：聊天气泡贴合度

实时体验链接：https://t.co/O48S6tnIrr

这是我觉得几个 demo 里最便于大家直观感受的例子。

因为这个 demo 对应的使用场景，是我们每个人都很熟悉的聊天页面，也是每个前端开发者需要面对的痛点。

设计聊天界面时，消息气泡需要做到根据文字的内容完美收缩：

• 文字短时紧紧包裹，不留大片空白；
• 文字长时自动换行，气泡自然变大；
• 最后一行的文字如果很短，气泡也不能留太多空白（否则看起来很丑）。

视频左边是使用 CSS 制作的效果，右边是写 Pretext 的运行结果。

如果单独看效果还没让你惊艳，左右对比之后就很明显了。

如果使用传统方式，局限性是十分明显的：结果往往是浏览器先按宽度换行，再按最长那一行的宽度来决定气泡宽度，导致最后一行的短文字后面留下大量多余的空间。

但是 Pretext 却能做到气泡紧紧包裹文字内容，使得界面非常精致。

原理很简单，直接在用户代码层精确测量文字的真实宽度和高度，然后计算出最优的气泡尺寸。

Demo 3 ：多栏杂志排版

实时体验链接：https://t.co/imAK7FxbJI

这个 Demo 演示的是：

真正的响应式、多栏、动态高度的杂志式排版，文字会根据容器宽度自动流动、重新分栏。

传统 CSS 的 column-count + column-fill 在动态内容和响应式场景下表现很差，经常出现高度不均、文字断裂，甚至有时候需要 JavaScript 强行干预。

但是 Pretext 能让开发者能精确控制每一行、每一栏的测量，从而实现真正“响应式 + 动态”的多栏布局。

Demo 4 ：可变字体 ASCII 艺术

实时体验链接：https://t.co/bDyARIwdqF

可变字体宽度的 ASCII 艺术，在过去是很难实现的。

以前用文字拼图案，需要大量手动计算，或者使用 Canvas 来绘制才行。

但是当 Pretext 可以精确测量每个字符的真实宽度后，实现这种效果就变得超级简单了。

视频里展示了两个版本的对比，突出宽度变化带来的不同效果。

当你调整字体宽度、容器大小或输入不同文字时，整个 ASCII 艺术会实时“变形”或重新排列，保持视觉上的完整性和美感。

Demo 5 ：CSS 难题通关集锦

实时体验链接：https://t.co/j3JRgcP37a

以前用 CSS 非常难处理或需要 hack 的一系列文本交互，现在用 Pretext 都变得极其简单。

demo 里展示了多个小场景——

• 输入框随着文字增多自动增长高度；
• 折叠面板展开/收起时的内容高度平滑计算；
• 多行文字精确居中对齐；
• 纯 Canvas 里绘制多行文本，不再需要牺牲排版质量；
• 其他各种以前头疼的边缘情况（比如复杂换行、垂直居中动态内容等）。

Cheng Lou 在写这个 demo 的时候，故意用“无聊的脚注”来形容。

看得出他本人对自己的作品很得意。

解决这些曾经的“大难题”，在有了 Pretext 后，已经不值得专门炫耀了。

结语

Pretext 的出现，其实也提醒了我们：前端，可能正在绕开浏览器本身。

过去，页面长什么样主要由浏览器和 CSS 决定；而现在，开发者可以通过计算，自己决定文字如何排布、甚至用文字来构建图像。这也解决了 AI 可以生成文本内容，但很难控制“怎么排版”的问题。

当 AI 负责生成内容，而 Pretext 负责精确控制布局时，UI 将不再是静态设计，而是一种可以被动态计算、实时优化的结果。