编译 | 程茜
智东西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尺寸测量，UEDBET官网 仅通过一次无缓存、线性遍历高度的筹办即可完成可见性判断，完了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想象扫清欺压。
基于这一决议UEDBET中国官方网站，其将UI前端渲染的文本尺寸酿成纯筹办搁置，AI不错提前精确知说念每段笔墨的大小、换行、位置，改日AI大概只需调用简便接口就能完了专科级排版，大幅裁汰AI生成高质地UI的难度。
B体育(Bsports)官方网站
备案号: