Title: 前端大神 Cheng Lou 开源新项目 Pretext ，获两千万人围观！前端要进入“无 CSS 时代”了 | BestBlogs.dev
URL Source: https://www.bestblogs.dev/article/fa4ca52f
Published Time: 2026-03-31 07:57:00
Markdown Content: Skip to main content Toggle navigation menu Toggle navigation menuArticlesPodcastsVideosTweetsSourcesNewsletters
⌘K
Change language Switch ThemeSign In
Narrow Mode
前端大神 Cheng Lou 开源新项目 Pretext ，获两千万人围观！前端要进入“无 CSS 时代”了
!Image 6: 夕小瑶科技说 夕小瑶科技说 @夕小瑶科技说
One Sentence Summary
Frontend developer Cheng Lou has open-sourced Pretext, a high-performance text measurement engine. By bypassing the DOM to calculate layouts directly in code, it resolves the long-standing conflict between frontend typography and performance, offering a new approach to dynamic UI development.
Summary
This article introduces Pretext, a new open-source project by renowned frontend developer Cheng Lou. The project aims to solve the long-standing performance bottlenecks in frontend text measurement and typography. Written in pure TypeScript with zero dependencies, Pretext achieves extremely high performance (500x faster than traditional DOM measurement) by bypassing the DOM for text measurement. Through various demos, the article showcases its applications in virtualized lists, chat bubbles, magazine-style layouts, and complex CSS interaction scenarios, highlighting how this tool enables frontend developers to control layouts with greater precision and pushes UI evolution from static design toward dynamic computation.
Main Points
* 1. Pretext resolves performance bottlenecks in frontend text measurement and typography.Traditional DOM measurement causes layout thrashing when handling large-scale dynamic text. By bypassing the DOM and calculating directly in code, Pretext achieves high-performance text layout, significantly improving rendering efficiency. * 2. Provides more precise UI control capabilities.Developers are no longer limited by CSS typography constraints, enabling the creation of complex and refined layouts like adaptive chat bubbles and multi-column magazine layouts, addressing long-standing CSS pain points. * 3. Drives the evolution of frontend UI toward dynamic computation.Combined with AI-generated content, Pretext allows UI layouts to be calculated and optimized in real-time, rather than relying solely on static CSS rules, providing the infrastructure for building more complex dynamic interfaces.
Metadata
AI Score
86
Website mp.weixin.qq.com
Published At Today
Length 2284 words (about 10 min)
Sign in to use highlight and note-taking features for a better reading experience. Sign in now
原创 未知艺术家 2026-03-31 15:57 北京
!Image 8 上周末，整个 AI 圈讨论度最高的，必是前端大神 Cheng Lou 开源的新项目——Pretext。
一个把前端文本能力从“受 CSS 奴役”中解放出来的里程碑式项目。
!Image 9 短短两天内，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 将不再是静态设计，而是一种可以被动态计算、实时优化的结果。
!Image 12: 夕小瑶科技说 夕小瑶科技说 @夕小瑶科技说
One Sentence Summary
Frontend developer Cheng Lou has open-sourced Pretext, a high-performance text measurement engine. By bypassing the DOM to calculate layouts directly in code, it resolves the long-standing conflict between frontend typography and performance, offering a new approach to dynamic UI development.
Summary
This article introduces Pretext, a new open-source project by renowned frontend developer Cheng Lou. The project aims to solve the long-standing performance bottlenecks in frontend text measurement and typography. Written in pure TypeScript with zero dependencies, Pretext achieves extremely high performance (500x faster than traditional DOM measurement) by bypassing the DOM for text measurement. Through various demos, the article showcases its applications in virtualized lists, chat bubbles, magazine-style layouts, and complex CSS interaction scenarios, highlighting how this tool enables frontend developers to control layouts with greater precision and pushes UI evolution from static design toward dynamic computation.
Main Points
* 1. Pretext resolves performance bottlenecks in frontend text measurement and typography.
Traditional DOM measurement causes layout thrashing when handling large-scale dynamic text. By bypassing the DOM and calculating directly in code, Pretext achieves high-performance text layout, significantly improving rendering efficiency.
* 2. Provides more precise UI control capabilities.
Developers are no longer limited by CSS typography constraints, enabling the creation of complex and refined layouts like adaptive chat bubbles and multi-column magazine layouts, addressing long-standing CSS pain points.
* 3. Drives the evolution of frontend UI toward dynamic computation.
Combined with AI-generated content, Pretext allows UI layouts to be calculated and optimized in real-time, rather than relying solely on static CSS rules, providing the infrastructure for building more complex dynamic interfaces.
Key Quotes
* In the AI era, text layout and measurement are the last—and biggest—bottlenecks to unlocking more interesting user interfaces. * Frontend, perhaps, is bypassing the browser itself. * When AI is responsible for generating content and Pretext is responsible for precise layout control, UI will no longer be a static design, but a result that can be dynamically calculated and optimized in real-time.
AI Score
86
Website mp.weixin.qq.com
Published At Today
Length 2284 words (about 10 min)
Tags
Pretext
Cheng Lou
Frontend Development
Performance Optimization
DOM
Related Articles
* 实测 Agent Skills，一次编写，全网通用 * In-depth Explanation of LLM Inference Acceleration Principles: Fractal Patterns and Resource Calculation Formulas * Agibot Enables Robots to 'Learn While Doing', One Robot's Mistakes Become Instant Learning for All * AI x Frontend Performance & Stability: Intelligent Diagnosis Practices at Kuaishou with 100M+ DAU * [[Issue 3665] WebMCP: A New Standard Enabling Every Website to Interact with AI Agents](https://www.bestblogs.dev/en/article/1e9d9524 "WebMCP is an emerging W3C standard that allows websites to interact directly with AI agents through structured tools (JS functions or HTML forms), replacing inefficient screenshot recognition and DOM parsing.") * Claude Code + Open Source Tools: A Brute Force Workflow for Effortless Success * Claude Code Internal Review: Practical Experience with Skills — 5 Common Traits of Great Skills * Episode 3641: How Strong Is AI at Writing React Code? Addy Osmani's Practical Guide * Anthropic Publishes 10,000-Word Article: Systematic Engineering Methods for Evaluating AI Agents * From the 'Screenshot Hack' to Real Interaction: The Technical Revolution of Bilibili's Column Video Cards HomeArticlesPodcastsVideosTweets