这个项目把浏览器“干了30年的事”干掉了：Pretext 为什么突然爆火？

** 这个项目把浏览器“干了30年的事”干掉了：Pretext 为什么突然爆火？**

最近在 GitHub 上，一个叫 Pretext 的项目悄悄冲上热榜：

Pretext：https://github.com/chenglou/pretext

作者：Cheng Lou（React 核心成员 / Midjourney 工程师）

很多人第一眼看不懂它在干嘛，但越看越觉得：

❗这不是优化，这是在“改写前端底层规则”

---

一、先说结论：它干掉了什么？

一句话：

Pretext 把“文本布局”从浏览器 DOM 里拿了出来，变成纯 JavaScript 计算。

也就是说：

以前：
文本怎么换行？多高？ → 浏览器说了算（黑盒）

现在：
文本怎么排？多高？ → 你自己算（可控）

这件事为什么重要？

因为它解决了一个所有前端都痛苦过的问题：

❓“这段文字渲染后到底有多高？”

---

二、项目背景：一个被忽略 30 年的底层问题

在 Web 世界里，文本布局一直是浏览器负责的：

• 换行（line break）
• 行高（line height）
• 高度计算（height）
• 字体度量（font metrics）

但问题是：

❌ 你无法“提前知道结果”

你必须：

div.innerText = text
const h = div.offsetHeight // ❗强制触发 reflow

这会带来一堆经典问题：

• 页面卡顿（layout thrashing）
• 虚拟列表高度不准
• SSR hydration mismatch
• 聊天 UI 抖动
• Canvas 无法自动排版

本质问题：

布局是“副作用”，不是“函数”

---

三、Pretext 做了什么（核心设计）

Pretext 的思路很简单，但极其颠覆：

✅ 用 JS 自己实现一套“文本排版引擎”

核心能力：

layout(text, width) => {
  lines: [...],
  height: number
}

它内部做了：

• Canvas.measureText（获取字体宽度）
• 分词（支持 emoji / CJK）
• 自动换行算法
• 行高计算
• 缓存优化

---

** 关键突破：变成“纯函数”**

// 无副作用
const result = layout("Hello world", 300)

这意味着：

• ❌ 不需要 DOM
• ❌ 不触发 reflow
• ❌ 不依赖浏览器渲染

直接得到布局结果

---

四、它解决了哪些核心问题？

这部分是它能爆的真正原因

---

1️⃣ 彻底消灭 reflow 带来的性能问题

传统流程：

render → measure → re-render → 再测

Pretext：

compute once → render

官方数据：300~600x faster than DOM

---

2️⃣ 虚拟列表终于可以“精准预测高度”

以前：

• 只能估算
• 滚动抖动

现在：

const h = layout(text, width).height

完全可预测

---

3️⃣ Canvas / WebGL 文本排版不再是噩梦

Canvas 最大问题：

❌ 不会自动换行

现在：

Pretext 直接给你每一行

---

4️⃣ AI UI 的关键基础设施

比如你熟悉的：

• ChatGPT 流式输出
• token-by-token 渲染
• 动态内容增长

Pretext 可以：

• 实时计算布局
• 无抖动更新 UI

---

5️⃣ SSR / Edge 渲染能力提升

因为它是纯函数：

• 可以在 Node 运行
• 可以在 Worker 运行
• 可以提前计算布局

SSR 精准到像素级

五、为什么它会在 GitHub 爆火？

不是因为功能多，而是这几点

⭐ 1. 打破行业默认前提

文本布局 = 浏览器负责 ❌
文本布局 = JS 可以做 ✅

这是“范式级改变”

---

⭐ 2. 命中所有前端的痛点

• 聊天 UI
• 动态高度
• 虚拟滚动
• 富文本

几乎人人踩过坑

⭐ 3. 工程质量很高

• 清晰分层（prepare / layout）
• 缓存机制
• 可复用设计

不是 demo，是“基础设施级代码”

---

⭐ 4. 作者本身影响力

Cheng Lou

• React 核心开发者
• Midjourney 工程师

社区信任度极高

---

六、一个最直观 Demo（你一看就懂）

** 场景：计算一段文本高度（不依赖 DOM）**

import { prepare, layout } from "pretext"

// Step 1: 预处理（可缓存）
const prepared = prepare({
  text: "这是一段很长很长的文本，用来测试自动换行效果",
  font: "16px Arial",
})

// Step 2: 布局计算
const result = layout(prepared, {
  width: 200,
})

// 输出
console.log(result.height)
console.log(result.lines)

---

对比传统写法（致命问题）

const div = document.createElement("div")
div.style.width = "200px"
div.innerText = text

document.body.appendChild(div)
const height = div.offsetHeight // ❗触发 reflow

性能差 + 不可控

---

七、一个更实用 Demo（聊天气泡）

function measureMessage(text) {
  const prepared = prepare({
    text,
    font: "14px system-ui",
  })

  return layout(prepared, { width: 240 })
}

// 使用
const msg = measureMessage("Hello Pretext!")
console.log(msg.height) // 直接拿高度

用于：

• 聊天 UI
• 虚拟列表
• 滚动优化

---

八、它在前端架构中的位置

可以这样理解：

以前：
React → DOM → Layout（黑盒）

现在：
React → Pretext → DOM（只负责渲染）

DOM 从“计算引擎”变成“展示层”

---

九、适用场景（很关键）

✅ 强烈推荐

• Electron 应用（桌面软件）
• AI Chat UI
• 虚拟列表
• Canvas / WebGL
• 富文本编辑器

❌ 不适合

• 普通后台系统
• 静态页面
• 简单表单

用了反而复杂

---

Pretext 的本质，是把“浏览器黑盒排版”变成“可控的纯函数系统”。

或者更狠一点：

DOM Layout → Userland Layout Engine

这个项目不是在优化前端，而是在重新定义“前端谁说了算”。