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

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

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

如果說傳統(tǒng)網(wǎng)頁(yè)文本布局的邏輯大多掌握在瀏覽器排版引擎手里，那么 Pretext 做的事，可以理解為：把其中一部分“測(cè)量和換行”的能力，提取成一個(gè)開發(fā)者可調(diào)用的純計(jì)算過程。

它到底解決了什么問題？

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

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

問題在于，這套方式雖然直觀，但代價(jià)不低。因?yàn)橐坏┠泐l繁插入文本、讀取尺寸、再調(diào)整布局，就很容易觸發(fā)瀏覽器的 reflow。放在少量元素上問題不大，可一旦進(jìn)入虛擬列表、瀑布流、聊天流、信息卡片墻這些高密度場(chǎng)景，性能和視覺穩(wěn)定性就會(huì)迅速變差。

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

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

Pretext 最有代表性的設(shè)計(jì)，是把文本處理拆成兩個(gè)階段。

第一階段是prepare。
在這個(gè)階段，庫(kù)會(huì)對(duì)文本做一次性的準(zhǔn)備工作：規(guī)范空白字符、做文本分段、應(yīng)用一些粘連和換行規(guī)則，并借助 Canvas 去測(cè)量各個(gè)片段的寬度，然后把這些信息緩存起來。

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

這也是它性能上最關(guān)鍵的地方。項(xiàng)目倉(cāng)庫(kù)給出的一個(gè)基準(zhǔn)快照顯示：在一組 500 段文本的測(cè)試?yán)铮?code>prepare()大約需要 19ms，而layout()只需要約 0.09ms 。
這意味著如果只是容器寬度變化、窗口 resize、卡片重新排布，理論上你只需要重復(fù)執(zhí)行layout()，而不必重復(fù)做完整測(cè)量。

為什么它會(huì)讓前端工程師興奮？

因?yàn)樗龅降氖且粋€(gè)很基礎(chǔ)、但影響很大的點(diǎn)：文本尺寸是很多 UI 布局的起點(diǎn)。

比如虛擬列表。過去很多列表要么估高、要么先渲染后修正，因此容易出現(xiàn)滾動(dòng)跳動(dòng)和位置漂移。Pretext 的價(jià)值在于，它讓開發(fā)者有機(jī)會(huì)在文本真正進(jìn) DOM 之前，就先把每個(gè) item 的高度算出來，從而更穩(wěn)定地完成預(yù)排版。

再比如聊天場(chǎng)景。對(duì)消息氣泡、AI 流式輸出、逐字增長(zhǎng)內(nèi)容來說，文本長(zhǎng)度一直在變化。如果每來一點(diǎn)內(nèi)容就重新觸發(fā) DOM 測(cè)量，成本會(huì)很高。Pretext 這種“預(yù)處理一次，后續(xù)高頻布局”的模式，會(huì)更適合這類實(shí)時(shí)場(chǎng)景 。

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

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

它和傳統(tǒng)排版系統(tǒng)有什么不同？

Pretext 并不是要替代瀏覽器的完整文本渲染引擎。它目前瞄準(zhǔn)的是比較常見的一類文本場(chǎng)景，項(xiàng)目文檔明確提到，它主要針對(duì)類似下面這組默認(rèn)行為：

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

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

這點(diǎn)很重要。因?yàn)樗f明 Pretext 不是“重新發(fā)明瀏覽器的一切文本排版”，而是在最常見、最工程化的文本布局需求里，拿出一套足夠快、足夠準(zhǔn)、足夠可控的方案。

換句話說，它更像一個(gè)前端基礎(chǔ)設(shè)施庫(kù)，而不是一個(gè)視覺層組件庫(kù)。

它為什么對(duì) AI 時(shí)代更有吸引力？

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

這背后的意思是，Pretext 的輸入輸出關(guān)系非常清晰：
給我一段文本、字體、寬度、行高，我返回高度、行數(shù)、每行內(nèi)容、起止游標(biāo)。這樣的接口對(duì)于 AI 代碼助手、生成式 UI 系統(tǒng)、自動(dòng)排版工具來說特別友好，因?yàn)樗烊贿m合被程序化調(diào)用。

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

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

這里需要稍微冷靜一點(diǎn)。

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

從官方資料來看，更穩(wěn)妥的表述應(yīng)該是：
Pretext 把昂貴的文本測(cè)量工作前置并緩存，把后續(xù)高頻布局變成純算術(shù)過程，因此在“重復(fù) layout、多次 resize、批量文本預(yù)排版”這類場(chǎng)景里，有機(jī)會(huì)顯著快于傳統(tǒng) DOM 測(cè)量方案。

所以，與其說它神奇地“全面替代瀏覽器布局”，不如說它精準(zhǔn)擊中了一個(gè)長(zhǎng)期性能痛點(diǎn)。

它可能帶來什么行業(yè)影響？

如果 Pretext 真的被更多項(xiàng)目采用，它的意義可能不只是一個(gè)工具庫(kù)。

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

第二，它可能推動(dòng)更多“去 DOM 化”的 UI 基礎(chǔ)設(shè)施。
一旦文本測(cè)量可以脫離 DOM，那么基于 Canvas、SVG、WebGL 的界面系統(tǒng)會(huì)更容易做；服務(wù)端預(yù)排版、邊緣渲染、跨端統(tǒng)一文本內(nèi)核這些方向，也會(huì)更值得探索 。

第三，它可能反過來刺激瀏覽器生態(tài)。
因?yàn)?Pretext 的流行，本質(zhì)上是在提醒業(yè)界：前端開發(fā)者其實(shí)一直缺少一種無副作用、可預(yù)測(cè)、排版前可調(diào)用的文本測(cè)量能力。如果這種需求持續(xù)放大，未來瀏覽器標(biāo)準(zhǔn)和原生 API 是否會(huì)補(bǔ)上這一層，值得觀察。

結(jié)語

Pretext 之所以值得關(guān)注，不只是因?yàn)樗欤且驗(yàn)樗|碰到了前端里一個(gè)非常“底層”的問題：文本布局到底能不能從瀏覽器黑盒里被部分拿出來，變成開發(fā)者自己掌控的計(jì)算過程？

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

對(duì)于普通開發(fā)者來說，Pretext 可能首先是一個(gè)高性能文本測(cè)量庫(kù)；但從更長(zhǎng)遠(yuǎn)看，它也許代表著一種新的前端思路——把原本依賴 DOM 才能知道的布局結(jié)果，提前變成可編程、可緩存、可組合的數(shù)據(jù)。

如果這個(gè)方向繼續(xù)成熟，未來很多看起來“只能靠瀏覽器現(xiàn)場(chǎng)決定”的排版問題，可能都會(huì)被改寫。

*本文依據(jù)網(wǎng)絡(luò)搜集數(shù)據(jù)整理，由AI工具輔助完成
All rights reserved. Copyright ? 2026