行業觀察｜Pretext：前端排版的一次“去 DOM 化”嘗試，Cheng Lou 想重新定義文本布局

前端世界里，有一個問題看起來很小，卻一直很難優雅解決：我怎么在不把文字真正塞進 DOM、也不觸發布局回流的前提下，提前知道這段話會占多高、會斷成幾行、每一行會長什么樣？

最近，前 React 核心成員、React Motion 作者、現 Midjourney 工程師 Cheng Lou 開源了一個新項目Pretext，就是沖著這個老問題來的。它不是新的 CSS 框架，也不是富文本編輯器，而是一個更底層的能力：用 JavaScript/TypeScript 在 DOM 之外做多行文本測量與布局。

如果說傳統網頁文本布局的邏輯大多掌握在瀏覽器排版引擎手里，那么 Pretext 做的事，可以理解為：把其中一部分“測量和換行”的能力，提取成一個開發者可調用的純計算過程。

它到底解決了什么問題？

在今天的 Web 開發里，如果你想知道一段文字最終有多高，最常見的辦法仍然是老三步：

先把文字渲染進頁面，再讓瀏覽器完成布局，最后通過getBoundingClientRect()、offsetHeight之類的 API 去讀結果。

問題在于，這套方式雖然直觀，但代價不低。因為一旦你頻繁插入文本、讀取尺寸、再調整布局，就很容易觸發瀏覽器的 reflow。放在少量元素上問題不大，可一旦進入虛擬列表、瀑布流、聊天流、信息卡片墻這些高密度場景，性能和視覺穩定性就會迅速變差。

Pretext 的核心思路，是繞開這條路徑。它不依賴“先渲染，再測量”的 DOM 方案，而是基于 Canvas 的measureText()和一套自建的換行邏輯，在 JavaScript 里提前算出結果 。

Pretext 的核心：把文本布局拆成 prepare 和 layout

Pretext 最有代表性的設計，是把文本處理拆成兩個階段。

第一階段是prepare。
在這個階段，庫會對文本做一次性的準備工作：規范空白字符、做文本分段、應用一些粘連和換行規則，并借助 Canvas 去測量各個片段的寬度，然后把這些信息緩存起來。

第二階段是layout。
到了這一步，就不再重新測量文本，也不訪問 DOM，而是直接基于前面緩存下來的寬度數據，做純計算式的換行和高度推導。換句話說，prepare 像預處理，layout 才是高頻熱路徑。

這也是它性能上最關鍵的地方。項目倉庫給出的一個基準快照顯示：在一組 500 段文本的測試里，prepare()大約需要 19ms，而layout()只需要約 0.09ms 。
這意味著如果只是容器寬度變化、窗口 resize、卡片重新排布，理論上你只需要重復執行layout()，而不必重復做完整測量。

為什么它會讓前端工程師興奮？

因為它碰到的是一個很基礎、但影響很大的點：文本尺寸是很多 UI 布局的起點。

比如虛擬列表。過去很多列表要么估高、要么先渲染后修正，因此容易出現滾動跳動和位置漂移。Pretext 的價值在于，它讓開發者有機會在文本真正進 DOM 之前，就先把每個 item 的高度算出來，從而更穩定地完成預排版。

再比如聊天場景。對消息氣泡、AI 流式輸出、逐字增長內容來說，文本長度一直在變化。如果每來一點內容就重新觸發 DOM 測量，成本會很高。Pretext 這種“預處理一次，后續高頻布局”的模式，會更適合這類實時場景 。

它還有一個更有想象力的方向：手動控制每一行文本。
Pretext 不只是能告訴你“這段話有多高”，它還提供了layoutWithLines()、walkLineRanges()、layoutNextLine()這樣的 API，允許你拿到逐行結果，甚至給每一行指定不同的可用寬度。這意味著開發者可以做出更復雜的文字繞排、異形排版、多列布局，甚至讓文本圍繞圖片、曲線或動態元素流動。

從官方演示也能看出，Pretext 想解鎖的并不只是“更快測高”，而是把瀏覽器里原本不太好做的高級文本布局，變成可編程能力。

它和傳統排版系統有什么不同？

Pretext 并不是要替代瀏覽器的完整文本渲染引擎。它目前瞄準的是比較常見的一類文本場景，項目文檔明確提到，它主要針對類似下面這組默認行為：

• white-space: normal
• word-break: normal
• overflow-wrap: break-word
• line-break: auto

同時也支持pre-wrap這類保留空格、Tab 和換行的情況。

這點很重要。因為它說明 Pretext 不是“重新發明瀏覽器的一切文本排版”，而是在最常見、最工程化的文本布局需求里，拿出一套足夠快、足夠準、足夠可控的方案。

換句話說，它更像一個前端基礎設施庫，而不是一個視覺層組件庫。

它為什么對 AI 時代更有吸引力？

Pretext 項目介紹里有一句很值得玩味：它使用瀏覽器自己的字體引擎作為 ground truth，迭代方式“very AI-friendly” 。

這背后的意思是，Pretext 的輸入輸出關系非常清晰：
給我一段文本、字體、寬度、行高，我返回高度、行數、每行內容、起止游標。這樣的接口對于 AI 代碼助手、生成式 UI 系統、自動排版工具來說特別友好，因為它天然適合被程序化調用。

放在今天的產品趨勢里看，這件事很有現實意義。無論是 AI 生成頁面、自動排版郵件、設計工具中的文本模塊，還是游戲 UI、Canvas/SVG 繪制系統，它們都越來越需要一種不依賴真實 DOM、但又足夠貼近瀏覽器文字行為的布局能力。Pretext 恰好卡在這個位置上 。

Pretext 真有“幾百倍提升”那么夸張嗎？

這里需要稍微冷靜一點。

外部媒體很喜歡用“300 倍到 600 倍更快”這樣的標題來描述 Pretext。這種說法不能說完全沒有依據，但非常依賴測試口徑：你比較的是哪一部分流程，測的是一次性準備還是高頻重復布局，場景是 10 段文本還是 500 段文本，是否包含真實 DOM 插入與讀取成本，這些都會顯著影響結果。

從官方資料來看，更穩妥的表述應該是：
Pretext 把昂貴的文本測量工作前置并緩存，把后續高頻布局變成純算術過程，因此在“重復 layout、多次 resize、批量文本預排版”這類場景里，有機會顯著快于傳統 DOM 測量方案。

所以，與其說它神奇地“全面替代瀏覽器布局”，不如說它精準擊中了一個長期性能痛點。

它可能帶來什么行業影響？

如果 Pretext 真的被更多項目采用，它的意義可能不只是一個工具庫。

第一，它可能改變大家處理文本布局的習慣。
過去很多前端團隊默認接受“文本高度只能靠 DOM 讀出來”，而 Pretext 提供了另一種思路：能不能在渲染之前先算？

第二，它可能推動更多“去 DOM 化”的 UI 基礎設施。
一旦文本測量可以脫離 DOM，那么基于 Canvas、SVG、WebGL 的界面系統會更容易做；服務端預排版、邊緣渲染、跨端統一文本內核這些方向，也會更值得探索 。

第三，它可能反過來刺激瀏覽器生態。
因為 Pretext 的流行，本質上是在提醒業界：前端開發者其實一直缺少一種無副作用、可預測、排版前可調用的文本測量能力。如果這種需求持續放大，未來瀏覽器標準和原生 API 是否會補上這一層，值得觀察。

結語

Pretext 之所以值得關注，不只是因為它快，而是因為它觸碰到了前端里一個非常“底層”的問題：文本布局到底能不能從瀏覽器黑盒里被部分拿出來，變成開發者自己掌控的計算過程？

Cheng Lou 給出的答案是：可以，而且已經能跑起來了。

對于普通開發者來說，Pretext 可能首先是一個高性能文本測量庫；但從更長遠看，它也許代表著一種新的前端思路——把原本依賴 DOM 才能知道的布局結果，提前變成可編程、可緩存、可組合的數據。

如果這個方向繼續成熟，未來很多看起來“只能靠瀏覽器現場決定”的排版問題，可能都會被改寫。

*本文依據網絡搜集數據整理，由AI工具輔助完成
All rights reserved. Copyright ? 2026