⌘K
Change language Switch ThemeSign In
Narrow Mode
500 万人围观，属于 AI 时代的最火前端和 UI 项目诞生
!Image 3: AI寒武纪 AI寒武纪 @AI寒武纪
One Sentence Summary
Senior frontend developer Cheng Lou has released Pretext, a text measurement library written in pure TypeScript that achieves a 500x performance boost by bypassing DOM measurement, offering a new paradigm for complex UI layouts in the AI era.
Summary
This article introduces Pretext, a foundational UI engineering project open-sourced by senior developer Cheng Lou. It is a text measurement algorithm written in pure TypeScript, designed to solve performance bottlenecks caused by DOM measurement and reflow in Web development. By bypassing traditional DOM measurement, Pretext achieves approximately a 500x performance increase and supports multi-language and complex typography. The project leveraged AI for iterative development, is now open-sourced, and provides several high-performance UI demos, offering a new approach for building high-performance, complex interactive Web interfaces.
Main Points
* 1. Pretext implements a new paradigm for text layout that bypasses DOM measurement and reflow.In traditional Web development, DOM read/write operations are performance bottlenecks. Pretext uses a pure TypeScript algorithm for direct measurement, avoiding expensive browser reflows and achieving a performance boost of approximately 500x. * 2. The project's development process was deeply integrated with AI assistance.The author utilized Claude Code and Codex to present browser foundation data, allowing AI to perform measurements and iterations across different container widths, thereby building this lightweight and highly compatible engine. * 3. Solved the performance challenges of complex UI layouts.Pretext supports complex scenarios such as virtualization, dynamic typography, and variable fonts, allowing developers to avoid compromising between performance and flashy UI, achieving a silky-smooth 120 FPS experience.
Metadata
AI Score
86
Website mp.weixin.qq.com
Published At Today
Length 1213 words (about 5 min)
Sign in to use highlight and note-taking features for a better reading experience. Sign in now
原创 你说的完全正确 2026-03-29 14:59 江苏
↑阅读之前记得关注+星标⭐️，😄，每天才能第一时间接收到更新
曾在React、Messenger、ReasonML、ReScript以及Midjourney团队工作过的资深开发者Cheng Lou，刚刚为前端和UI界面的未来扔出了一枚深水炸弹。
他带着一个堪称UI工程基石级别的技术方案强势回归：一个完全采用纯TypeScript编写的、快速且准确的全面用户态文本测量算法。
借助这项技术，开发者可以直接绕过DOM测量和重排，甚至不需要写任何CSS，就能完成整个网页的排版。
文本排版和测量一直是解锁更有趣UI界面的最大瓶颈，尤其是在如今的AI时代。过去，前端在进行这种测量时，往往需要通过获取边界客户端矩形这种混乱的方式爬取数据，这会导致DOM读写交替，而这也是Web端最昂贵的操作之一。
此外，过去的测量还需要批量处理，这直接破坏了设置UI组件边界的编程模型。
而现在，Cheng Lou发布的这个新范式打破了这一切。与传统方式相比，它的性能提升了约500倍。虽然他本人坦言这种直接对比不太公平，因为最核心的性能收益其实来自于底层架构的转变。
令人惊讶的是，这个引擎的体积只有区区几KB，但它不仅深谙各大浏览器的怪癖，还支持开发者需要的所有语言，包括韩语、从右向左读的阿拉伯文混排，甚至是平台特定的Emoji表情。
这项成果的背后离不开AI的助力。在过去的几周里，Cheng Lou向Claude Code和Codex展示了浏览器的真实基础数据，让AI在每一个重要的容器宽度下进行测量和不断迭代，最终打造出了这个引擎。
有了这个解决方案，开发者再也不需要在炫酷的GL图形落地页和实用的文字博客之间做非此即彼的取舍。Cheng Lou直接放出了五个震撼的演示案例：
第一是遮挡剔除虚拟化测试。在成百上千个高度各异的文本框中，由于完全不需要DOM测量，可见性检查被极大地简化为对高度进行单次线性无缓存遍历，无论怎样滑动和调整窗口大小，都能保持120帧的丝滑体验。
演示链接： https://chenglou.me/pretext/masonry/
第二是尺寸紧凑贴合的聊天气泡效果。
演示链接： https://chenglou.me/pretext/bubbles/
第三是具备响应式和动态效果的多栏杂志排版。
演示链接： https://chenglou.me/pretext/dynamic-layout
第四是可变字体宽度的ASCII艺术，这种过去难以实现的效果现在变得轻而易举。
演示链接： https://chenglou.me/pretext/variable-typographic-ascii
第五是各种传统的CSS排版难题大通关。无论是自动扩展的文本区域、手风琴折叠面板、多行文本居中，还是纯Canvas多行文本，现在都降级成了毫无挑战性的常规操作。
演示链接： https://chenglou.me/pretext/accordion/
除上述内容外，他还整理了包含更多实用功能和纯粹炫技的演示合集，并表示未来会持续更新： https://chenglou.me/pretext/ https://somnai-dreams.github.io/pretext-demos/
目前，该项目Pretext已经开源。开发者可以前往 https://github.com/chenglou/pretext
查看，或者直接通过 npm 或 bun install @chenglou/pretext 命令进行安装，然后把代码扔给AI去创造更多酷炫的演示。项目仓库中也详细记录了具体的测量数据。
参考： https://x.com/_chenglou/status/2037713766205608234
--end--
最后记得⭐️我，每天都在更新：如果觉得文章还不错的话可以点赞转发推荐评论
/...@作者：你说的完全正确（YAR师） 跳转微信打开
!Image 7: AI寒武纪 AI寒武纪 @AI寒武纪
One Sentence Summary
Senior frontend developer Cheng Lou has released Pretext, a text measurement library written in pure TypeScript that achieves a 500x performance boost by bypassing DOM measurement, offering a new paradigm for complex UI layouts in the AI era.
Summary
This article introduces Pretext, a foundational UI engineering project open-sourced by senior developer Cheng Lou. It is a text measurement algorithm written in pure TypeScript, designed to solve performance bottlenecks caused by DOM measurement and reflow in Web development. By bypassing traditional DOM measurement, Pretext achieves approximately a 500x performance increase and supports multi-language and complex typography. The project leveraged AI for iterative development, is now open-sourced, and provides several high-performance UI demos, offering a new approach for building high-performance, complex interactive Web interfaces.
Main Points
* 1. Pretext implements a new paradigm for text layout that bypasses DOM measurement and reflow.
In traditional Web development, DOM read/write operations are performance bottlenecks. Pretext uses a pure TypeScript algorithm for direct measurement, avoiding expensive browser reflows and achieving a performance boost of approximately 500x.
* 2. The project's development process was deeply integrated with AI assistance.
The author utilized Claude Code and Codex to present browser foundation data, allowing AI to perform measurements and iterations across different container widths, thereby building this lightweight and highly compatible engine.
* 3. Solved the performance challenges of complex UI layouts.
Pretext supports complex scenarios such as virtualization, dynamic typography, and variable fonts, allowing developers to avoid compromising between performance and flashy UI, achieving a silky-smooth 120 FPS experience.
Key Quotes
* With this technology, developers can directly bypass DOM measurement and reflow, and even complete the layout of an entire webpage without writing any CSS. * Compared to traditional methods, its performance is improved by approximately 500 times. * With this solution, developers no longer need to choose between flashy GL graphic landing pages and practical text-based blogs.
AI Score
86
Website mp.weixin.qq.com
Published At Today
Length 1213 words (about 5 min)
Tags
Pretext
Frontend Development
UI Engineering
Performance Optimization
TypeScript
Related Articles
* Episode 3641: How Strong Is AI at Writing React Code? Addy Osmani's Practical Guide * In-depth Explanation of LLM Inference Acceleration Principles: Fractal Patterns and Resource Calculation Formulas * From the 'Screenshot Hack' to Real Interaction: The Technical Revolution of Bilibili's Column Video Cards * 10,000-Word Transcript! A Masterclass from the Father of Claude Code: Hands-on with Claude Cowork and Detailed Personal CC Configuration * Anthropic Unveils Long-Term Agent Development Architecture: Leveraging GAN Mechanisms for Claude to Autonomously Build Full-Stack Apps * Major Release! Anthropic's Official Comprehensive Guide to Creating Skills: The Ultimate Step-by-Step Manual * [[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.") * 2 Million Views: A Practical Guide to Using Claude Code * Anthropic Releases Another Detailed Article: First Comprehensive Reveal of the Entire Agent Evaluation Process 'Lessons Learned from Claude Code Development' * AI x Frontend Performance & Stability: Intelligent Diagnosis Practices at Kuaishou with 100M+ DAU HomeArticlesPodcastsVideosTweets