浙江
一覺醒來，全球網站文字排版能力提升 500 倍？
沒錯，藤原書記都能站在文章里開始跳舞了，關鍵這些動起來的文字還不是動畫，是網頁實時渲染的。
不止如此，還有游蕩在文字之間的火龍，滿屏亂蹦的彈力球，以及字符組成的旋轉甜甜圈等等。
一時間，大伙兒好像又回到了那個博客盛行的年代，開始鼓搗起了自己的 “QQ 空間”。
這一切的背后其實是一個 3 天 2000 萬瀏覽量的開源項目：Pretext，出自前端開發者 Cheng Lou 之手。
據說，用這個項目去做瀏覽器的文字排版，能夠提升近 500 倍的效率，直接鳥槍換炮，哦不，是換離子軌道炮了。。。
世超也是第一時間上手搓了個 Demo 試了試，你別說，還真有點東西。
這里咱直接參考 Pretext 庫的接口，做一個以文字為交互元素的網頁小游戲。
設想是一個黑洞，一個白洞，在滿是文字的世界里，黑洞能吸文字變大，白洞能射擊擊落文字。
很快啊，就搓出來了，大小也是非常 mini，不到 30KB。
從效果來看，確實非常絲滑，即使字符數量增多也能很流暢的渲染，尤其是切換白天黑夜模式時的重新渲染，以及拖動窗口時的物理碰撞，都沒有一點點的卡頓。
這么說吧，跑到 60 幀是這臺屏幕的上限，不是 Pretext 的。
接下來，作為對比，世超也拿傳統方式做了個基本一樣的例子，實現方式用的是 CSS 和 DOM 。
很明顯啊，看著雖然差不多，但實際上動作復雜點，或者切換個模式，幀率就會直接從滿幀 60 腰斬到 30 左右了。
原因也很簡單，就是傳統的 DOM 模式渲染文本時需要反復重排，而 Pretext 分離了計算和渲染，更加高效。
具體來說就是 Pretext 直接繞過了重復的過程，先調用 Canvas 中的一個函數，把所有文字的像素大小和位置提前計算一遍，輪到排版的時候直接加減就行了。
如果說之前排版就像擠地鐵，每次變動都得擠一遍，那 Pretext 的思路就是排座位，提前預定好每個字符的大小位置，排版時進行一次優雅的組合計算就行了，效率可不就碾壓了。
就這樣，Pretext 節省的大量計算資源給社區的大伙兒提供了充足的整活空間。
在這里，你甚至可以玩到字符版的 DOOM，由字符組成的地圖，角色，槍械，乃至射擊反饋都能流暢運行。
不愧是能塞進卡西歐計算器的游戲，強強聯合了屬于是。
除了平面排版，帶 3D 模型的空間排版也不在話下，因為 Pretext 提前計算了文字大小和位置信息，處理起來非常靈活，可以隨時和模型的空間信息對接，并不局限于 2D 的平面。
除此之外，交互其實是最能體現這種性能優勢的。
因為有了多出來的計算資源，就可以把大量的文字變成可操作的粒子，能夠根據互動做出不同的反饋效果，就像下面這樣，字符成了流體，隨著手機晃動而流動。
當然，以上這些看著略顯花哨的視效其實之前也能做到，就比如下面這種拿老技術做的文字浪潮，就效果來看也不輸上面。
而且社區里面也有一些不同的聲音，在擔憂這個項目可能并沒有看起來那么有用。
那這么說，Pretext 還是噱頭太大了么？
那倒也不至于，因為無論是 Demo 還是社區的整活兒，都不是為了實用，而是為了展示項目能力和性能，秀肌肉用的。
放到日常使用的場景，跟咱密切相關的，就是可以讓閱讀體驗變得更加絲滑。
通過下面這組文本渲染的對比就能看出來，Pretext 1 毫秒干完的活兒交給傳統的 DOM 得幾十毫秒。
所以，今天動輒幾千字就卡頓的滾動可能真會成為歷史，因為按著這種思路，哪怕頁面上幾萬甚至幾十萬個文本擠在一起，也不會輕易卡成 PPT 了。
再比如，對于下面這種像傳統報紙一樣的排版方式，傳統的方法其實需要很多細節微調，很難做到像 Word 一樣讓文字自然的環繞圖片，或者更加動態的排版。
但采用了 Pretext 這種方法，就可以利用之前計算好的大小數據進行位置信息的計算，很輕便地產出合適的排版效果。
更何況，有了更高效的文本渲染引擎，會降低很多文本編輯應用的開發門檻。
比如這個簡歷編輯器，作者開發時就能更專注于功能設計，而不必花大把精力去優化排版的性能開銷。
值得一提的是，無論是 Pretext 項目，世超的 Demo，還是上面的諸多展示，都大量運用了 AI 作為輔助。
大伙兒的使用方式可能有所出入，但這東西確實能在一些小的地方派上用場。
比如 Cheng Lou 的做法就是同時指揮兩個模型（Claude 和 Codex）一起工作， 等到運行完，再互相檢查各自的解決方案，最后自己手動整理。這對于一些拉丁語，日語等文字的繁雜適配工作有著非常大的幫助。
而在最近的 GitHub 熱榜中，其實也總能在第二位的貢獻者那看到 Claude 的身影，不得不說這東西基本融入開發流程了。
但話說回來，現在的 Pretext 其實還有很多不足，比如一些場景只支持指定字體，排版算法還相對簡樸，以及很多設備適配上還存在不少 BUG。
但是，它也確實鏟動了之前那座坨屎山，畢竟每次變動都得重排的邏輯還是有點兒抽象。
而反觀 Word 和蘋果 Pages等，早在多年前就已經推出了類似的動態功能，優化得都不錯。作為互聯網的一大入口，網頁端的升級還是有點慢了。
當然，世超還是希望這種基礎性的優化多來點兒，畢竟現在電子配件都在漲價，節省點資源也好讓手里的硬件多戰幾年不是。
對了，差友們如果有興趣，這是那個網頁對比 Demo 的鏈接（或者點擊下方“閱讀原文”復制到瀏覽器打開），大伙可以自己玩玩看，區別還挺大的：
https://xpin-pretext.sothco.eu.org
撰文：風華
編輯：早起 & 江江 & 面線
美編：煥妍
圖片、資料來源：
X，GitHub，Youtube，dearlarry.co
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
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.
