2000萬人圍觀，React大佬開源神作“干翻”前端！速度飆500倍，狂攬2.8萬顆星

　　
智東西
編譯 程茜
編輯 心緣

　　智東西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)，并讓它們?cè)诿恳粋€(gè)重要的容器寬度下進(jìn)行測(cè)量和迭代，持續(xù)運(yùn)行數(shù)周完成的。

　　Cheng Lou在社交平臺(tái)X上對(duì)Pretext給出了極高評(píng)價(jià)：“未來幾年UI工程領(lǐng)域最重要的基礎(chǔ)組件之一。”

　　Pretext還支持開發(fā)者所能想到的所有語言，兼容各種瀏覽器特性差異。不過他也提到Pretext比傳統(tǒng)方式快約500倍的對(duì)比可能不公平。

　　其強(qiáng)大的靈活性更是激發(fā)了開發(fā)者的創(chuàng)作熱情，目前社交平臺(tái)X上已掀起Pretext應(yīng)用熱潮，如用Pretext做游戲、MV，手搓文字環(huán)繞、流動(dòng)效果。

　　還有知名歌曲Bad Apple!!那段經(jīng)典、經(jīng)常被拿來各種魔改的黑白影繪視頻，開發(fā)者讓歌詞文本通過位移變形特效，拼出了人物、城堡的輪廓，且隨音樂旋律絲滑變化。

　　【視頻】

　　Pretext受熱捧的背后，核心在于其跳出了傳統(tǒng)前端排版的方案，避開前端UI渲染中最費(fèi)時(shí)費(fèi)力的操作之一DOM，這一難題長(zhǎng)期困擾著全球前端開發(fā)者，更是大型前端項(xiàng)目、高并發(fā)場(chǎng)景下的短板。

　　新方案采用自研文本測(cè)量邏輯，以瀏覽器自身的字體引擎作為真實(shí)基準(zhǔn)，既保證了排版的精準(zhǔn)度，又將渲染效率提升至新高度，更重要的是，這種創(chuàng)新架構(gòu)天然適配AI迭代優(yōu)化，或?yàn)槲磥砬岸伺虐娴闹悄芑⒆詣?dòng)化發(fā)展預(yù)留巨大空間。

　　有趣的是，Cheng Lou還自曝，Vibe Coding不夠，邊等結(jié)果邊轉(zhuǎn)呼啦圈就是正確的做法，他透露做Pretext這個(gè)月下來，他人都瘦了快2磅。

　　一、一個(gè)頁面放幾十萬個(gè)文本框，絲滑滾動(dòng)不卡頓

　　UI設(shè)計(jì)的傳統(tǒng)方案中，因?yàn)槲淖謴?fù)雜多變，所以需要依賴DOM讀尺寸，這需要強(qiáng)制瀏覽器重新計(jì)算整個(gè)頁面布局，會(huì)導(dǎo)致頁面卡頓、不可預(yù)測(cè)、性能差。因此做高性能動(dòng)態(tài)排版的難度很大。

　　但在AI實(shí)時(shí)生成UI、空間計(jì)算、3D界面發(fā)展迅速的時(shí)代，這種慢且不可控的文本布局方式完全跟不上需求。

　　Pretext的出現(xiàn)就是為了解決這一難題。其可以基于瀏覽器自有的字體引擎作為實(shí)地驗(yàn)證，相比傳統(tǒng)方案更快、性能更可控。

　　Cheng Lou在社交平臺(tái)X上舉了幾個(gè)典型實(shí)用案例：

　　基于Pretext，一個(gè)頁面可以同時(shí)放下幾十萬個(gè)文本框，還能做到絲滑滾動(dòng)、不卡頓。

　　其對(duì)數(shù)十萬個(gè)高度各不相同的文本框進(jìn)行遮擋虛擬化（Occlusion Virtualization）處理，無需進(jìn)行DOM尺寸測(cè)量，僅通過一次無緩存、線性遍歷高度的計(jì)算即可完成可見性判斷，實(shí)現(xiàn)120fps流暢滾動(dòng)與窗口縮放。

　　其頁面的聊天氣泡能自動(dòng)貼合內(nèi)容，可以看到在滑動(dòng)時(shí)聊天框的寬度會(huì)緊緊貼合文字內(nèi)容，不會(huì)撐滿頁面整行。

　　瀏覽多個(gè)頁面時(shí)，其能實(shí)現(xiàn)響應(yīng)式動(dòng)態(tài)多欄雜志排版，像雜志那樣實(shí)現(xiàn)多欄布局，同時(shí)做到自適應(yīng)屏幕、內(nèi)容動(dòng)態(tài)變化。

　　Pretext還能快速制作可變字體寬度的ASCII字符畫，也就是只包含英文字母、數(shù)字、標(biāo)點(diǎn)符號(hào)、少量符號(hào)等基礎(chǔ)符號(hào)拼出圖案、人臉、風(fēng)景、logo等字符畫。

　　那些常見的自動(dòng)增高輸入框、折疊面板、多行文本居中、純Canvas多行文本，以及其他過去在CSS里給網(wǎng)頁排版、布置樣式等非常棘手的難題，如今都變得簡(jiǎn)單到不值一提。

　　有開發(fā)者對(duì)比了使用Pretext和DOM對(duì)整本小說即時(shí)分頁，要求每頁都有預(yù)覽，Pretext每次運(yùn)行只需2-3毫秒，而DOM需要超過100毫秒。

　　二、X上開啟前端性能秀，開發(fā)者用文本做游戲、MV、3D特效

　　開發(fā)者直接在X上來了一場(chǎng)前端炫技。

　　有開發(fā)直接用Pretext做出了歌詞文本隨旋律進(jìn)行變形做出MV。

　　下面是英國(guó)當(dāng)紅制作人Fred again與Daft Punk核心成員Thomas Bangalter的DJ合作現(xiàn)場(chǎng)，用文字把節(jié)奏呈現(xiàn)了出來。

　　【視頻】

　　還有開發(fā)者用Pretext做游戲。

　　例如下面是3D迷宮射擊游戲《毀滅戰(zhàn)士》的ASCII字符版。

　　還有文字版的打磚塊小游戲，磚塊跳動(dòng)時(shí)，頁面上的大小文字都會(huì)隨之流暢變形。

　　文本還能模擬類似水面波紋或聲波傳播的視覺效果。

　　還有網(wǎng)友稱，Pretext的最實(shí)用場(chǎng)景是做簡(jiǎn)歷，不管你填多少內(nèi)容，它會(huì)自動(dòng)調(diào)整排版、字號(hào)、間距，永遠(yuǎn)只占一頁不會(huì)溢出到第二頁。

　　三、“架構(gòu)變革才能實(shí)現(xiàn)最大性能提升”，Pretext有兩種使用場(chǎng)景

　　傳統(tǒng)網(wǎng)頁測(cè)文字大小、位置，要頻繁讀DOM，非常慢還會(huì)卡，同時(shí)這類尺寸測(cè)量還必須進(jìn)行批量處理，這會(huì)破壞UI組件邊界獨(dú)立的編程模型。

　　Pretext方案不靠DOM測(cè)量，會(huì)先對(duì)文本進(jìn)行布局，再通過getBoundingClientRect粗略讀取尺寸信息。Cheng Lou認(rèn)為，最大的性能提升，永遠(yuǎn)來自架構(gòu)層面的變革。

　　在開源項(xiàng)目主頁，Pretext有兩種使用場(chǎng)景：

　　首先是在完全不接觸DOM的前提下，測(cè)量一段文本的高度。

　　prepare()負(fù)責(zé)執(zhí)行一次性工作：規(guī)范化空白字符、文本分段、應(yīng)用連字規(guī)則，并通過Canvas測(cè)量各文本片段尺寸，最后返回一個(gè)不透明句柄；layout()是后續(xù)開銷極低的熱點(diǎn)路徑：僅基于緩存的寬度做純數(shù)值計(jì)算；避免對(duì)相同文本和配置重復(fù)調(diào)用prepare()，否則會(huì)失去預(yù)計(jì)算的意義，例如窗口大小改變時(shí)，只需重新執(zhí)行l(wèi)ayout()即可。

　　其次是自行手動(dòng)對(duì)段落進(jìn)行分行排版。

　　將prepare替換為prepareWithSegments，然后執(zhí)行以下操作：

　　結(jié)語：Pretext或成下一代UI關(guān)鍵基礎(chǔ)設(shè)施

　　Pretext開源將前端文本測(cè)量與布局，從瀏覽器DOM的傳統(tǒng)方案升級(jí)為一套可預(yù)測(cè)、可緩存、高性能的方案，或?yàn)楦咝阅堋?dòng)態(tài)、AI原生的下一代UI設(shè)計(jì)掃清障礙。

　　基于這一方案，其將UI前端渲染的文本尺寸變成純計(jì)算結(jié)果，AI可以提前精確知道每段文字的大小、換行、位置，未來AI或許只需調(diào)用簡(jiǎn)單接口就能實(shí)現(xiàn)專業(yè)級(jí)排版，大幅降低AI生成高質(zhì)量UI的難度。