AI 氛圍編碼解決網頁排版 30 年難題，Pretext 如何徹底改變下一代網頁設計方式？
過去三十年以來，我們的網路世界其實都非常「靜態」，畢竟所謂的網頁標準，最初只是為了分享充滿文字的學術論文而設計，但是直到現在，網頁卻成為了人類歷史上最複雜、最泛用，甚至是最具有互動性的操作介面。
然而，在現行網頁標準的背後，一項被稱為「Reflow」的版面繪製流程，卻得為網頁畫面呈現的執行效能，付出極為高昂的代價。
每當開發者需要改變網頁上，某個文字段落的行列位置或高度，重新編排網頁的結構、內容及樣式，並且要求排版引擎繪製出全新畫面時，系統就必須向瀏覽器發起「文件物件模型（DOM）」查詢，同時重新計算整個頁面的幾何結構，才可以順利修改網頁。
若用比喻的方式說明，這個過程就像是在一座虛擬城市中，每當有居民打開自家的房門，那麼一套管理整座城市的作業系統，就不得不重新繪製整個城市的完整地圖，使得執行過程變得十分缺乏效率。
一個「歷經千辛萬苦」的成就
但是就在不久之前，軟體工程師 Cheng Lou 公開了一項劃時代的解決方案：Pretext，它允許開發者繞過 DOM 及效能瓶頸，並且於「使用者層（userland）」進行多行文字測量與版面重繪。
Cheng Lou 指出，Pretext 是一項「歷經千辛萬苦」才達到的成就，這個完全不需要任何依賴項的 TypeScript 函式庫，大小僅僅只有 15KB，而且還透過 MIT 開源授權，讓所有前端領域開發者皆能受惠。
最重要之處在於 Cheng Lou 主動表明，Pretext 是他運用 AI 編碼工具及人工智慧模型，例如 OpenAI 的 Codex 和 Anthropic 的 Claude 等，共同於氛圍編碼環境下所創造的技術里程碑。
讓文本具備動態，但仍保持原樣
雖然 Pretext 主要是為了解決網頁上文本排版繪製的效能問題，但若單純僅靠文字描述，反而很難表現出 Pretext 替網路發展帶來的重要意義。
在不深入探討技術細節的前提下，我們可以簡單認為 Pretext 有能力將網頁上的靜態文字，變成近乎完全動態、允許互動且具備回饋性的動態文本，甚至是令文字自動適應排版，並且流暢繞過網頁中的各種物件。
同時，Pretext 還可以維持文字原本的順序，以及詞與詞、行與行之間的間距，即便使用者點擊並拖曳其他物件，使其與文字重疊，或是刻意調整瀏覽器視窗大小，所有文字的呈現方式依然會保持原樣。
從盤旋的巨龍到掉落的字母
就在 Pretext 發表之後，網路上已經有許多開發者，利用該功能製作了範例網頁，展示出 Pretext 令人驚豔的功能與效能。
在範例網頁中，一隻於文字方塊內盤旋飛舞的巨龍，當牠吐出火焰時，周圍的文字會被融化，文字也會被巨龍蜿蜒的身軀流暢推開，這在以往的網頁排版技術中，幾乎是不可能的任務。
至於另一位開發者，利用 Pretext 製作出一款手機 App，它要求使用者必須把手機以「完全水平」的方式拿著，才能正確排版並閱讀螢幕上的文字，若是將裝置往任一側傾斜，所有文字就會掉落並聚集到角落，彷彿它們是從平坦的托盤表面，突然傾倒而下的真實物體。
在社群平台上，甚至還有開發者做出更大膽的嘗試，透過 Pretext 將一部小說改編而成的電影，直接用原著作品的文字進行排版，並於文本網頁上動態呈現，反映 Pretext 快速且靈敏的版面重繪能力。
從上面所列出的範例中，不難看出 Pretext 對於網頁設計師和前端開發者有多麼大的幫助，但實際上任何曾經花時間嘗試在網頁上排版一段文字，或者試著將文字環繞在圖片、互動按鈕旁的人，大概都會對此感到無比震撼（按：若曾操作過 Word 的文繞圖功能，就知道這件事有多痛苦。）
截至目前為止，已經有部分開發者指出，他們正在利用 Pretext 開發更多實用功能，例如專為閱讀障礙者設計的自訂字型調整工具，以及更加進階的字距優化選項。
徹底脫鉤 DOM，效能提升 600 倍
Pretext 所帶來的影響之大，導致 Cheng Lou 在發表專案後，短短 48 小時之內便於 GitHub 上獲得超過 14,000 顆星，他的貼文也在社群平台 X 上，累積了多達 1,900 萬次瀏覽，更被開發業界視為網頁技術的一場「質變」。
藉由將文字排版與 DOM 完全脫鉤，並把瀏覽器的 Canvas 字型度量引擎（Font Metrics Engine）作為「基準」，再結合純數學運算，Cheng Lou 讓 Pretext 能夠精確預測每個字元、單詞和行列落在網頁上的何處，而且完全無需呼叫任何 DOM 節點。
當 DOM 不再成為效能瓶頸，根據專案頁面載明的測試，Pretext 能夠於 0.09 毫秒內，處理高達 500 筆不同的文本資料，相較傳統 DOM 方法，這反映出至少 300 到 600 倍的效能提升。
Pretext 所帶來的執行效率進化，將網頁繪製從繁重且異步的繁瑣任務，轉變為同步且可預測的基礎操作；即使在行動裝置上，瀏覽器也能夠借助 Pretext，以每秒 120 幀的效率流暢執行。
善用 AI 工具，確保主流相容性
只不過，Cheng Lou 口中「歷經千辛萬苦」的技術挑戰，其實並不僅限於撰寫出高效率的數學公式，他更必須確保這些公式，可以與主流瀏覽器，例如Chrome、Safari、Firefox 等，實際渲染文字的狀況相符。
畢竟，每個排版引擎渲染文字時，總是會有自己的獨特的細節與「怪癖」，從處理字距調整的方式，到換行演算法的具體細節皆然。
在這方面，Cheng Lou 選擇大膽仰賴 AI 工具，透過反覆引導 Claude 和 Codex 等模型，並以經典小說全文及各類多語言資料集在內的龐大語料庫為基礎，將 TypeScript 版面配置邏輯與瀏覽器實際排版結果互相校準，最終在無需依靠執行檔與大型解析函式庫的情況下，為文字排版實現像素級的精準度。
對於「網頁文件」本質的再次思考
前端開發業界的知名人士，如雲端開發者平台 Vercel 執行長 Guillermo Rauch，皆對 Pretext 給予正面評價，然而該技術卻也引起部分人士反思，擔心「富客戶端（thick client）」會因此變得過度擴張，繞過 DOM 將使網頁環境失去原先的簡潔性。
對此 Cheng Lou 回應，一直以來網頁標準始終停滯於「文件格式」的思維模式，開發者不斷於靜態核心之上疊加動態的腳本功能，直至複雜度達到邊際效益遞減的臨界點。
然而，Cheng Lou 強調，Pretext 正是為了「重啟」這種思維而生的全新解決方案，網頁的排版繪製更應該是一種解釋器（interpreter），即一套開發者可以操控的函式集，而非僅由瀏覽器管理且黑箱操作的資料格式。
用 AI 輔助編碼，攻克數十年難題
Pretext 採用 MIT 授權條款發佈，確保它能夠持續作為開發者社群與商業組織共用的開放性工具，同時 Pretext 也不僅僅是讓文字排版看起來更美觀的函式庫，更是一套基礎架構層級的底層工具，將網頁資訊的視覺呈現，自 1990 年代開始的架構限制徹底脫鉤。
Cheng Lou 選擇 AI 輔助編碼突破傳統限制，亦標誌著新時代的來臨，即高效率的工程團隊能夠妥善運用 AI，量身打造效能卓越的基礎技術，並攻克數十年以來的艱困難題。
對於開發者來說，要不要立刻採用 Pretext，目前依然得現實狀況而定。比方說若企業正在打造「生成式使用者介面」，或需要高頻率更新的資料儀表板，就可以考慮立刻選擇 Pretext，但同時必須清楚理解富客戶端所帶來的取捨。
網頁升級可程式化媒介的關鍵時刻
無論是應用於高端排版設計、高更新率虛擬資訊流或生成式 AI 介面，Pretext 技術的出現，在在代表著網頁正從乘載文字的靜態文件，蛻變為真正可程式化媒介的關鍵時刻，並使網頁的流暢度與表現力，能夠與原生 App 一較高下。
Pretext 是讓網頁標準邁向更類似遊戲引擎，而非靜態文件環境的重要一大步，願意採用這種技術的組織，將有機會成為 AI 時代下視覺語言的主導者。
至於其他人，也就是這個世界上所有的網路使用者，隨著 Pretext 開始應用到常見的網頁及網站，你我或許很快都能親身經歷它所帶來的非凡影響。
【推薦閱讀】
◆ Meta 新 AI 模型算力需求大降一個量級！解密 Muse Spark 如何重構技術底層邏輯
◆ Anthropic 不敢全面公開的 AI：Claude Mythos 為何正在重寫網路安全規則？
◆ AI 算力戰轉向「記憶體壓縮」：Google 出手發表 TurboQuant 演算法，如何重構 AI 推論成本？
＊本文開放合作夥伴轉載，參考資料：VentureBeat、GitHub，首圖來源：River Marchand
（責任編輯：鄒家彥）