2000万人围观，React大佬开源神作“干翻”前端！速度飙500倍，狂揽2.8万颗星

　　
智东西
编译 程茜
编辑 心缘

　　智东西3月31日消息，刚刚过去的周末，开源纯TypeScript库Pretext迅速引爆GitHub，至今Star数已飙升至2.47万，开发者的官宣推文浏览量已超2100万次，成为全球开发者社区焦点。

　　Pretext由前端大神、Midjourney前端工程师Cheng Lou重磅开源，仅几KB大小，渲染速度比传统工具快约500倍。

　　Pretext由前端大神、Midjourney前端工程师、开源JavaScript库React核心团队成员Cheng Lou重磅开源，是仅几KB大小的纯TypeScript库，前端UI渲染速度比传统工具快约500倍。Cheng Lou透露，Pretext的实现是通过向Claude Code和Codex展示浏览器的真实基准，并让它们在每一个重要的容器宽度下进行测量和迭代，持续运行数周完成的。

　　Cheng Lou在社交平台X上对Pretext给出了极高评价：“未来几年UI工程领域最重要的基础组件之一。”

　　Pretext还支持开发者所能想到的所有语言，兼容各种浏览器特性差异。不过他也提到Pretext比传统方式快约500倍的对比可能不公平。

　　其强大的灵活性更是激发了开发者的创作热情，目前社交平台X上已掀起Pretext应用热潮，如用Pretext做游戏、MV，手搓文字环绕、流动效果。

　　还有知名歌曲Bad Apple!!那段经典、经常被拿来各种魔改的黑白影绘视频，开发者让歌词文本通过位移变形特效，拼出了人物、城堡的轮廓，且随音乐旋律丝滑变化。

　　【视频】

　　Pretext受热捧的背后，核心在于其跳出了传统前端排版的方案，避开前端UI渲染中最费时费力的操作之一DOM，这一难题长期困扰着全球前端开发者，更是大型前端项目、高并发场景下的短板。

　　新方案采用自研文本测量逻辑，以浏览器自身的字体引擎作为真实基准，既保证了排版的精准度，又将渲染效率提升至新高度，更重要的是，这种创新架构天然适配AI迭代优化，或为未来前端排版的智能化、自动化发展预留巨大空间。

　　有趣的是，Cheng Lou还自曝，Vibe Coding不够，边等结果边转呼啦圈就是正确的做法，他透露做Pretext这个月下来，他人都瘦了快2磅。

　　一、一个页面放几十万个文本框，丝滑滚动不卡顿

　　UI设计的传统方案中，因为文字复杂多变，所以需要依赖DOM读尺寸，这需要强制浏览器重新计算整个页面布局，会导致页面卡顿、不可预测、性能差。因此做高性能动态排版的难度很大。

　　但在AI实时生成UI、空间计算、3D界面发展迅速的时代，这种慢且不可控的文本布局方式完全跟不上需求。

　　Pretext的出现就是为了解决这一难题。其可以基于浏览器自有的字体引擎作为实地验证，相比传统方案更快、性能更可控。

　　Cheng Lou在社交平台X上举了几个典型实用案例：

　　基于Pretext，一个页面可以同时放下几十万个文本框，还能做到丝滑滚动、不卡顿。

　　其对数十万个高度各不相同的文本框进行遮挡虚拟化（Occlusion Virtualization）处理，无需进行DOM尺寸测量，仅通过一次无缓存、线性遍历高度的计算即可完成可见性判断，实现120fps流畅滚动与窗口缩放。

　　其页面的聊天气泡能自动贴合内容，可以看到在滑动时聊天框的宽度会紧紧贴合文字内容，不会撑满页面整行。

　　浏览多个页面时，其能实现响应式动态多栏杂志排版，像杂志那样实现多栏布局，同时做到自适应屏幕、内容动态变化。

　　Pretext还能快速制作可变字体宽度的ASCII字符画，也就是只包含英文字母、数字、标点符号、少量符号等基础符号拼出图案、人脸、风景、logo等字符画。

　　那些常见的自动增高输入框、折叠面板、多行文本居中、纯Canvas多行文本，以及其他过去在CSS里给网页排版、布置样式等非常棘手的难题，如今都变得简单到不值一提。

　　有开发者对比了使用Pretext和DOM对整本小说即时分页，要求每页都有预览，Pretext每次运行只需2-3毫秒，而DOM需要超过100毫秒。

　　二、X上开启前端性能秀，开发者用文本做游戏、MV、3D特效

　　开发者直接在X上来了一场前端炫技。

　　有开发直接用Pretext做出了歌词文本随旋律进行变形做出MV。

　　下面是英国当红制作人Fred again与Daft Punk核心成员Thomas Bangalter的DJ合作现场，用文字把节奏呈现了出来。

　　【视频】

　　还有开发者用Pretext做游戏。

　　例如下面是3D迷宫射击游戏《毁灭战士》的ASCII字符版。

　　还有文字版的打砖块小游戏，砖块跳动时，页面上的大小文字都会随之流畅变形。

　　文本还能模拟类似水面波纹或声波传播的视觉效果。

　　还有网友称，Pretext的最实用场景是做简历，不管你填多少内容，它会自动调整排版、字号、间距，永远只占一页不会溢出到第二页。

　　三、“架构变革才能实现最大性能提升”，Pretext有两种使用场景

　　传统网页测文字大小、位置，要频繁读DOM，非常慢还会卡，同时这类尺寸测量还必须进行批量处理，这会破坏UI组件边界独立的编程模型。

　　Pretext方案不靠DOM测量，会先对文本进行布局，再通过getBoundingClientRect粗略读取尺寸信息。Cheng Lou认为，最大的性能提升，永远来自架构层面的变革。

　　在开源项目主页，Pretext有两种使用场景：

　　首先是在完全不接触DOM的前提下，测量一段文本的高度。

　　prepare()负责执行一次性工作：规范化空白字符、文本分段、应用连字规则，并通过Canvas测量各文本片段尺寸，最后返回一个不透明句柄；layout()是后续开销极低的热点路径：仅基于缓存的宽度做纯数值计算；避免对相同文本和配置重复调用prepare()，否则会失去预计算的意义，例如窗口大小改变时，只需重新执行layout()即可。

　　其次是自行手动对段落进行分行排版。

　　将prepare替换为prepareWithSegments，然后执行以下操作：

　　结语：Pretext或成下一代UI关键基础设施

　　Pretext开源将前端文本测量与布局，从浏览器DOM的传统方案升级为一套可预测、可缓存、高性能的方案，或为高性能、动态、AI原生的下一代UI设计扫清障碍。

　　基于这一方案，其将UI前端渲染的文本尺寸变成纯计算结果，AI可以提前精确知道每段文字的大小、换行、位置，未来AI或许只需调用简单接口就能实现专业级排版，大幅降低AI生成高质量UI的难度。