od体育中国手机官网入口 > 关于OD体育 >

编译 | 程茜

智东西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尺寸测量，OD体育(中国)仅通过一次无缓存、线性遍历高度的筹画即可完成可见性判断，收场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狡计扫清阻截。

基于这一决策OD体育(中国)，其将UI前端渲染的文本尺寸造成纯筹画限定，AI不错提前精确知说念每段笔墨的大小、换行、位置，畴昔AI大约只需调用简便接口就能收场专科级排版，大幅裁汰AI生成高质料UI的难度。

斗鱼体育(DouYuSports)官网入口

• 念主
• 不雅
• 万东
• 2000
• OD体育(中国)