這個開源項目，號稱解決了文字排版的世紀難題
整理版優先睇
Pretext 徹底解決了困擾前端 20 年的 DOM 文字測量難題，實現了不觸發 Reflow 的高性能排版。
- 核心痛點：傳統瀏覽器排版需依賴 DOM 測量文字高度，頻繁觸發昂貴的迴流（Reflow）操作且無法緩存。
- 技術突破：由 Framer Motion 作者開發，利用 Canvas 預先計算字符寬高並存儲，將佈局計算轉化為純算術運算。
- 功能亮點：支持中日韓（CJK）、Emoji 及混合雙向文字，能精確計算多行文字的最小寬度實現完美貼合（Shrink Wrap）。
- 應用場景：極大優化虛擬列表、瀑布流佈局及手風琴動畫，在渲染前即可預知精確高度，消除頁面抖動。
- 性能優勢：支持萬級氣泡同時渲染而不卡頓，為對性能有極致要求的複雜 Feed 流提供終極解決方案。
Pretext
由 Cheng Lou 開發的高性能文字測量與佈局 JavaScript 庫，支持不觸碰 DOM 的情況下計算排版。
Pretext 官方文檔與 Demo
包含詳細的技術說明與實際排版效果演示。
文字排版的「世紀難題」：昂貴的 DOM 測量
做前端開發最怕遇到容器高度突然跳動。無論是聊天氣泡、瀑布流卡片，還是手風琴展開動畫，背後都卡在同一個瓶頸：瀏覽器必須先量完文字，才知道容器該給多大。
Pretext：跳過 DOM 直接計算佈局
Pretext 是由 Framer Motion 作者 Cheng Lou 推出的開源項目。它不走尋常路，直接繞過 DOM 引擎來解決問題。
核心思路：利用 Canvas 調用瀏覽器的字體引擎，提前將每個字符的寬高數據算好並存儲，後續佈局只需進行純算術運算。
這種做法讓文字排版從「測量」變成了「計算」，速度提升了幾個數量級，且完全不會引起頁面抖動。
三大實戰場景：從瀑布流到流暢動畫
Pretext 的出現讓許多原本棘手的 UI 交互變得輕而易舉：
全方位的語言支持與技術細節
Pretext 並非只針對英文優化，它對複雜文本的處理能力非常強悍，適合全球化產品開發。
• 支持 CJK (中日韓) 字符排版
• 支持 Emoji 渲染與測量
• 支持混合雙向文字 (如阿拉伯文與英文混排)
• 處理 Grapheme Clusters (字符簇) 分割
這個開源項目，號稱解決了文字排版的世紀難題
做前端的同學，大概都被這個問題坑過：
聊天消息渲染之後，父容器高度突然變了？瀑布流卡片排列好之後，頁面抖了一下？手風琴展開動畫，卡在"等 DOM 算完高度"這一步？
這背後都是同一個元兇：DOM 文字測量。
瀏覽器要量完文字才知道容器該多大，這個動作會觸發迴流（reflow），是頁面性能最貴的操作之一，而且沒法緩存——每次文字變了都要重新量。
這個問題存在了 20 年，一直沒有好的解決方案。
直到最近，我看到了這個項目。
它是什麼？
這個庫叫 Pretext，作者 Cheng Lou——Framer Motion 的作者。
Pretext 是一個純 JavaScript/TypeScript 的文字測量和佈局庫。核心能力：在不觸 DOM 的前提下，精確計算多行文字的高度和佈局。
實現思路：用 Canvas 調用瀏覽器自己的字體引擎，提前把每個字符的寬高全部算好存起來，後續只需要做純算術運算，不再需要讀 DOM。
用它能做哪些事？
氣泡對話的完美貼合
聊天氣泡，CSS 的 width: fit-content 只能跟隨最寬那行，導致短行右邊留空白。
Pretext 能找到讓文字恰好換行 N 行的最小寬度，真正做到 "shrink wrap"。一萬個氣泡同時渲染，瀏覽器眼睛都不眨一下。
手風琴展開，動畫想多流暢都行
手風琴菜單展開時，內容區高度通常靠 CSS transition 硬撐或者寫死高度。
Pretext 在展開之前就已經知道展開後有多高，動畫路徑完全預知，transition 想做多流暢都可以。
瀑布流，真正的預知高度
瀑布流卡片排列，最難的就是：不知道每張卡片有多高，排完之後整個佈局還要重新計算。
Pretext 在渲染之前就算好了每張卡片的高度，瀑布流一次性排好，不需要二次回爐。
支持中日韓、emoji、混合雙向文字
從 Demo 截圖能看到，Pretext 處理 CJK 字符、emoji、阿拉伯文混合雙向文字都沒問題，連字符分割（grapheme clusters）都處理了。
適合誰用？
• 做虛擬列表/虛擬滾動的同學，需要精確預判每項高度 • 做聊天/Feed 流的同學，多媒體內容高度不確定 • 做瀑布流/masonry 佈局的同學 • 對性能優化有強迫症的同學
GitHub：
https://github.com/chenglou/pretext
文檔和 Demo 都在官網：chenglou.me/pretext
這個問題存在了 20 年，現在終於有人給出了一個完整答案。先收藏，不虧。