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

沒錯，藤原書記都能站在文章里開始跳舞了，關(guān)鍵這些動起來的文字還不是動畫，是網(wǎng)頁實時渲染的。

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

一時間，大伙兒好像又回到了那個博客盛行的年代，開始鼓搗起了自己的 “QQ 空間”。

這一切的背后其實是一個 3 天 2000 萬瀏覽量的開源項目：Pretext，出自前端開發(fā)者 Cheng Lou 之手。

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

世超也是第一時間上手搓了個 Demo 試了試，你別說，還真有點東西。

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

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

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

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

這么說吧，跑到 60 幀是這臺屏幕的上限，不是 Pretext 的。

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

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

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

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

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

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

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

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

除了平面排版，帶 3D 模型的空間排版也不在話下，因為 Pretext 提前計算了文字大小和位置信息，處理起來非常靈活，可以隨時和模型的空間信息對接，并不局限于 2D 的平面。

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

因為有了多出來的計算資源，就可以把大量的文字變成可操作的粒子，能夠根據(jù)互動做出不同的反饋效果，就像下面這樣，字符成了流體，隨著手機晃動而流動。

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

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

那這么說，Pretext 還是噱頭太大了么？

那倒也不至于，因為無論是 Demo 還是社區(qū)的整活兒，都不是為了實用，而是為了展示項目能力和性能，秀肌肉用的。

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

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

所以，今天動輒幾千字就卡頓的滾動可能真會成為歷史，因為按著這種思路，哪怕頁面上幾萬甚至幾十萬個文本擠在一起，也不會輕易卡成 PPT 了。

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

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

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

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

值得一提的是，無論是 Pretext 項目，世超的 Demo，還是上面的諸多展示，都大量運用了 AI 作為輔助。

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

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

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

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

但是，它也確實鏟動了之前那座坨屎山，畢竟每次變動都得重排的邏輯還是有點兒抽象。

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

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

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

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

撰文：風(fēng)華

編輯：早起 & 江江 & 面線

美編：煥妍

圖片、資料來源：

X，GitHub，Youtube，dearlarry.co