![]()
智東西
編譯 程茜
編輯 心緣
智東西3月31日消息,剛剛過去的周末,開源純TypeScript庫Pretext迅速引爆GitHub,至今Star數(shù)已飆升至2.47萬,開發(fā)者的官宣推文瀏覽量已超2100萬次,成為全球開發(fā)者社區(qū)焦點(diǎn)。
Pretext由前端大神、Midjourney前端工程師Cheng Lou重磅開源,僅幾KB大小,渲染速度比傳統(tǒng)工具快約500倍。
Pretext由前端大神、Midjourney前端工程師、開源JavaScript庫React核心團(tuán)隊(duì)成員Cheng Lou重磅開源,是僅 幾KB大小的純TypeScript庫,前端UI渲染速度比傳統(tǒng)工具快約 500倍。Cheng Lou透露,Pretext的實(shí)現(xiàn)是通過向 Claude Code和Codex展示瀏覽器的真實(shí)基準(zhǔn),并讓它們在每一個重要的容器寬度下進(jìn)行測量和迭代,持續(xù)運(yùn)行數(shù)周完成的。
![]()
Cheng Lou在社交平臺X上對Pretext給出了極高評價:“未來幾年UI工程領(lǐng)域最重要的基礎(chǔ)組件之一。”
Pretext還支持開發(fā)者所能想到的所有語言,兼容各種瀏覽器特性差異。不過他也提到Pretext比傳統(tǒng)方式快約500倍的對比可能不公平。
![]()
其強(qiáng)大的靈活性更是激發(fā)了開發(fā)者的創(chuàng)作熱情,目前社交平臺X上已掀起Pretext應(yīng)用熱潮,如用Pretext做游戲、MV,手搓文字環(huán)繞、流動效果。
還有知名歌曲Bad Apple!!那段經(jīng)典、經(jīng)常被拿來各種魔改的黑白影繪視頻,開發(fā)者讓歌詞文本通過位移變形特效,拼出了人物、城堡的輪廓,且隨音樂旋律絲滑變化。
【視頻】
Pretext受熱捧的背后,核心在于其跳出了傳統(tǒng)前端排版的方案,避開前端UI渲染中最費(fèi)時費(fèi)力的操作之一DOM,這一難題長期困擾著全球前端開發(fā)者,更是大型前端項(xiàng)目、高并發(fā)場景下的短板。
新方案采用自研文本測量邏輯,以瀏覽器自身的字體引擎作為真實(shí)基準(zhǔn),既保證了排版的精準(zhǔn)度,又將渲染效率提升至新高度,更重要的是,這種創(chuàng)新架構(gòu)天然適配AI迭代優(yōu)化,或?yàn)槲磥砬岸伺虐娴闹悄芑⒆詣踊l(fā)展預(yù)留巨大空間。
有趣的是,Cheng Lou還自曝,Vibe Coding不夠,邊等結(jié)果邊轉(zhuǎn)呼啦圈就是正確的做法,他透露做Pretext這個月下來,他人都瘦了快2磅。
![]()
一、一個頁面放幾十萬個文本框,絲滑滾動不卡頓
UI設(shè)計(jì)的傳統(tǒng)方案中,因?yàn)槲淖謴?fù)雜多變,所以需要依賴DOM讀尺寸,這需要強(qiáng)制瀏覽器重新計(jì)算整個頁面布局,會導(dǎo)致頁面卡頓、不可預(yù)測、性能差。因此做高性能動態(tài)排版的難度很大。
但在AI實(shí)時生成UI、空間計(jì)算、3D界面發(fā)展迅速的時代,這種慢且不可控的文本布局方式完全跟不上需求。
Pretext的出現(xiàn)就是為了解決這一難題。其可以基于瀏覽器自有的字體引擎作為實(shí)地驗(yàn)證,相比傳統(tǒng)方案更快、性能更可控。
Cheng Lou在社交平臺X上舉了幾個典型實(shí)用案例:
基于Pretext,一個頁面可以同時放下幾十萬個文本框,還能做到絲滑滾動、不卡頓。
其對數(shù)十萬個高度各不相同的文本框進(jìn)行遮擋虛擬化(Occlusion Virtualization)處理,無需進(jìn)行DOM尺寸測量,僅通過一次無緩存、線性遍歷高度的計(jì)算即可完成可見性判斷,實(shí)現(xiàn)120fps流暢滾動與窗口縮放。
其頁面的聊天氣泡能自動貼合內(nèi)容,可以看到在滑動時聊天框的寬度會緊緊貼合文字內(nèi)容,不會撐滿頁面整行。
![]()
瀏覽多個頁面時,其能實(shí)現(xiàn)響應(yīng)式動態(tài)多欄雜志排版,像雜志那樣實(shí)現(xiàn)多欄布局,同時做到自適應(yīng)屏幕、內(nèi)容動態(tài)變化。
Pretext還能快速制作可變字體寬度的ASCII字符畫,也就是只包含英文字母、數(shù)字、標(biāo)點(diǎn)符號、少量符號等基礎(chǔ)符號拼出圖案、人臉、風(fēng)景、logo等字符畫。
![]()
那些常見的自動增高輸入框、折疊面板、多行文本居中、純Canvas多行文本,以及其他過去在CSS里給網(wǎng)頁排版、布置樣式等非常棘手的難題,如今都變得簡單到不值一提。
![]()
有開發(fā)者對比了使用Pretext和DOM對整本小說即時分頁,要求每頁都有預(yù)覽,Pretext每次運(yùn)行只需2-3毫秒,而DOM需要超過100毫秒。
![]()
二、X上開啟前端性能秀,開發(fā)者用文本做游戲、MV、3D特效
開發(fā)者直接在X上來了一場前端炫技。
有開發(fā)直接用Pretext做出了歌詞文本隨旋律進(jìn)行變形做出MV。
下面是英國當(dāng)紅制作人Fred again與Daft Punk核心成員Thomas Bangalter的DJ合作現(xiàn)場,用文字把節(jié)奏呈現(xiàn)了出來。
【視頻】
還有開發(fā)者用Pretext做游戲。
例如下面是3D迷宮射擊游戲《毀滅戰(zhàn)士》的ASCII字符版。
還有文字版的打磚塊小游戲,磚塊跳動時,頁面上的大小文字都會隨之流暢變形。
文本還能模擬類似水面波紋或聲波傳播的視覺效果。
![]()
還有網(wǎng)友稱,Pretext的最實(shí)用場景是做簡歷,不管你填多少內(nèi)容,它會自動調(diào)整排版、字號、間距,永遠(yuǎn)只占一頁不會溢出到第二頁。
三、“架構(gòu)變革才能實(shí)現(xiàn)最大性能提升”,Pretext有兩種使用場景
傳統(tǒng)網(wǎng)頁測文字大小、位置,要頻繁讀DOM,非常慢還會卡,同時這類尺寸測量還必須進(jìn)行批量處理,這會破壞UI組件邊界獨(dú)立的編程模型。
Pretext方案不靠DOM測量,會先對文本進(jìn)行布局,再通過getBoundingClientRect粗略讀取尺寸信息。Cheng Lou認(rèn)為,最大的性能提升,永遠(yuǎn)來自架構(gòu)層面的變革。
在開源項(xiàng)目主頁,Pretext有兩種使用場景:
首先是在完全不接觸DOM的前提下,測量一段文本的高度。
prepare()負(fù)責(zé)執(zhí)行一次性工作:規(guī)范化空白字符、文本分段、應(yīng)用連字規(guī)則,并通過Canvas測量各文本片段尺寸,最后返回一個不透明句柄;layout()是后續(xù)開銷極低的熱點(diǎn)路徑:僅基于緩存的寬度做純數(shù)值計(jì)算;避免對相同文本和配置重復(fù)調(diào)用prepare(),否則會失去預(yù)計(jì)算的意義,例如窗口大小改變時,只需重新執(zhí)行l(wèi)ayout()即可。
其次是自行手動對段落進(jìn)行分行排版。
將prepare替換為prepareWithSegments,然后執(zhí)行以下操作:
![]()
結(jié)語:Pretext或成下一代UI關(guān)鍵基礎(chǔ)設(shè)施
Pretext開源將前端文本測量與布局,從瀏覽器DOM的傳統(tǒng)方案升級為一套可預(yù)測、可緩存、高性能的方案,或?yàn)楦咝阅堋討B(tài)、AI原生的下一代UI設(shè)計(jì)掃清障礙。
基于這一方案,其將UI前端渲染的文本尺寸變成純計(jì)算結(jié)果,AI可以提前精確知道每段文字的大小、換行、位置,未來AI或許只需調(diào)用簡單接口就能實(shí)現(xiàn)專業(yè)級排版,大幅降低AI生成高質(zhì)量UI的難度。
![]()
特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺“網(wǎng)易號”用戶上傳并發(fā)布,本平臺僅提供信息存儲服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.