一覺(jué)醒來(lái)，全球網(wǎng)站文字排版能力提升 500 倍？

沒(méi)錯(cuò)，藤原書(shū)記都能站在文章里開(kāi)始跳舞了，關(guān)鍵這些動(dòng)起來(lái)的文字還不是動(dòng)畫(huà)，是網(wǎng)頁(yè)實(shí)時(shí)渲染的。

不止如此，還有游蕩在文字之間的火龍，滿屏亂蹦的彈力球，以及字符組成的旋轉(zhuǎn)甜甜圈等等。

一時(shí)間，大伙兒好像又回到了那個(gè)博客盛行的年代，開(kāi)始鼓搗起了自己的 “QQ 空間”。

這一切的背后其實(shí)是一個(gè) 3 天 2000 萬(wàn)瀏覽量的開(kāi)源項(xiàng)目：Pretext，出自前端開(kāi)發(fā)者 Cheng Lou 之手。

據(jù)說(shuō)，用這個(gè)項(xiàng)目去做瀏覽器的文字排版，能夠提升近 500 倍的效率，直接鳥(niǎo)槍換炮，哦不，是換離子軌道炮了。。。

世超也是第一時(shí)間上手搓了個(gè) Demo 試了試，你別說(shuō)，還真有點(diǎn)東西。

這里咱直接參考 Pretext 庫(kù)的接口，做一個(gè)以文字為交互元素的網(wǎng)頁(yè)小游戲。

設(shè)想是一個(gè)黑洞，一個(gè)白洞，在滿是文字的世界里，黑洞能吸文字變大，白洞能射擊擊落文字。

很快啊，就搓出來(lái)了，大小也是非常 mini，不到 30KB。

從效果來(lái)看，確實(shí)非常絲滑，即使字符數(shù)量增多也能很流暢的渲染，尤其是切換白天黑夜模式時(shí)的重新渲染，以及拖動(dòng)窗口時(shí)的物理碰撞，都沒(méi)有一點(diǎn)點(diǎn)的卡頓。

這么說(shuō)吧，跑到 60 幀是這臺(tái)屏幕的上限，不是 Pretext 的。

接下來(lái)，作為對(duì)比，世超也拿傳統(tǒng)方式做了個(gè)基本一樣的例子，實(shí)現(xiàn)方式用的是 CSS 和 DOM 。

很明顯啊，看著雖然差不多，但實(shí)際上動(dòng)作復(fù)雜點(diǎn)，或者切換個(gè)模式，幀率就會(huì)直接從滿幀 60 腰斬到 30 左右了。

原因也很簡(jiǎn)單，就是傳統(tǒng)的 DOM 模式渲染文本時(shí)需要反復(fù)重排，而 Pretext 分離了計(jì)算和渲染，更加高效。

具體來(lái)說(shuō)就是 Pretext 直接繞過(guò)了重復(fù)的過(guò)程，先調(diào)用 Canvas 中的一個(gè)函數(shù)，把所有文字的像素大小和位置提前計(jì)算一遍，輪到排版的時(shí)候直接加減就行了。

如果說(shuō)之前排版就像擠地鐵，每次變動(dòng)都得擠一遍，那 Pretext 的思路就是排座位，提前預(yù)定好每個(gè)字符的大小位置，排版時(shí)進(jìn)行一次優(yōu)雅的組合計(jì)算就行了，效率可不就碾壓了。

就這樣，Pretext 節(jié)省的大量計(jì)算資源給社區(qū)的大伙兒提供了充足的整活空間。

在這里，你甚至可以玩到字符版的 DOOM，由字符組成的地圖，角色，槍械，乃至射擊反饋都能流暢運(yùn)行。

不愧是能塞進(jìn)卡西歐計(jì)算器的游戲，強(qiáng)強(qiáng)聯(lián)合了屬于是。

除了平面排版，帶 3D 模型的空間排版也不在話下，因?yàn)?Pretext 提前計(jì)算了文字大小和位置信息，處理起來(lái)非常靈活，可以隨時(shí)和模型的空間信息對(duì)接，并不局限于 2D 的平面。

除此之外，交互其實(shí)是最能體現(xiàn)這種性能優(yōu)勢(shì)的。

因?yàn)橛辛硕喑鰜?lái)的計(jì)算資源，就可以把大量的文字變成可操作的粒子，能夠根據(jù)互動(dòng)做出不同的反饋效果，就像下面這樣，字符成了流體，隨著手機(jī)晃動(dòng)而流動(dòng)。

當(dāng)然，以上這些看著略顯花哨的視效其實(shí)之前也能做到，就比如下面這種拿老技術(shù)做的文字浪潮，就效果來(lái)看也不輸上面。

而且社區(qū)里面也有一些不同的聲音，在擔(dān)憂這個(gè)項(xiàng)目可能并沒(méi)有看起來(lái)那么有用。

那這么說(shuō)，Pretext 還是噱頭太大了么？

那倒也不至于，因?yàn)闊o(wú)論是 Demo 還是社區(qū)的整活兒，都不是為了實(shí)用，而是為了展示項(xiàng)目能力和性能，秀肌肉用的。

放到日常使用的場(chǎng)景，跟咱密切相關(guān)的，就是可以讓閱讀體驗(yàn)變得更加絲滑。

通過(guò)下面這組文本渲染的對(duì)比就能看出來(lái)，Pretext 1 毫秒干完的活兒交給傳統(tǒng)的 DOM 得幾十毫秒。

所以，今天動(dòng)輒幾千字就卡頓的滾動(dòng)可能真會(huì)成為歷史，因?yàn)榘粗@種思路，哪怕頁(yè)面上幾萬(wàn)甚至幾十萬(wàn)個(gè)文本擠在一起，也不會(huì)輕易卡成 PPT 了。

再比如，對(duì)于下面這種像傳統(tǒng)報(bào)紙一樣的排版方式，傳統(tǒng)的方法其實(shí)需要很多細(xì)節(jié)微調(diào)，很難做到像 Word 一樣讓文字自然的環(huán)繞圖片，或者更加動(dòng)態(tài)的排版。

但采用了 Pretext 這種方法，就可以利用之前計(jì)算好的大小數(shù)據(jù)進(jìn)行位置信息的計(jì)算，很輕便地產(chǎn)出合適的排版效果。

更何況，有了更高效的文本渲染引擎，會(huì)降低很多文本編輯應(yīng)用的開(kāi)發(fā)門(mén)檻。

比如這個(gè)簡(jiǎn)歷編輯器，作者開(kāi)發(fā)時(shí)就能更專(zhuān)注于功能設(shè)計(jì)，而不必花大把精力去優(yōu)化排版的性能開(kāi)銷(xiāo)。

值得一提的是，無(wú)論是 Pretext 項(xiàng)目，世超的 Demo，還是上面的諸多展示，都大量運(yùn)用了 AI 作為輔助。

大伙兒的使用方式可能有所出入，但這東西確實(shí)能在一些小的地方派上用場(chǎng)。

比如 Cheng Lou 的做法就是同時(shí)指揮兩個(gè)模型（Claude 和 Codex）一起工作， 等到運(yùn)行完，再互相檢查各自的解決方案，最后自己手動(dòng)整理。這對(duì)于一些拉丁語(yǔ)，日語(yǔ)等文字的繁雜適配工作有著非常大的幫助。

而在最近的 GitHub 熱榜中，其實(shí)也總能在第二位的貢獻(xiàn)者那看到 Claude 的身影，不得不說(shuō)這東西基本融入開(kāi)發(fā)流程了。

但話說(shuō)回來(lái)，現(xiàn)在的 Pretext 其實(shí)還有很多不足，比如一些場(chǎng)景只支持指定字體，排版算法還相對(duì)簡(jiǎn)樸，以及很多設(shè)備適配上還存在不少 BUG。

但是，它也確實(shí)鏟動(dòng)了之前那座坨屎山，畢竟每次變動(dòng)都得重排的邏輯還是有點(diǎn)兒抽象。

而反觀 Word 和蘋(píng)果 Pages等，早在多年前就已經(jīng)推出了類(lèi)似的動(dòng)態(tài)功能，優(yōu)化得都不錯(cuò)。作為互聯(lián)網(wǎng)的一大入口，網(wǎng)頁(yè)端的升級(jí)還是有點(diǎn)慢了。

當(dāng)然，世超還是希望這種基礎(chǔ)性的優(yōu)化多來(lái)點(diǎn)兒，畢竟現(xiàn)在電子配件都在漲價(jià)，節(jié)省點(diǎn)資源也好讓手里的硬件多戰(zhàn)幾年不是。

對(duì)了，差友們?nèi)绻信d趣，這是那個(gè)網(wǎng)頁(yè)對(duì)比 Demo 的鏈接（或者點(diǎn)擊下方“閱讀原文”復(fù)制到瀏覽器打開(kāi)），大伙可以自己玩玩看，區(qū)別還挺大的：

https://xpin-pretext.sothco.eu.org

撰文：風(fēng)華

編輯：早起 & 江江 & 面線

美編：煥妍

圖片、資料來(lái)源：

X，GitHub，Youtube，dearlarry.co