为什么网页滑动长列表时偶尔会卡？为什么有些文字排版在不同设备上忽大忽小？为什么用 Canvas 做文字排版那么难？

最近前端圈出现了一个叫 Pretext 的工具，由 Cheng Lou 发布，用一套全新思路解决了网页文字布局几十年的老问题。一上线就引来一众科技圈大佬热议，被看作是交互界面的一次重要突破。

一、传统网页排版，到底卡在哪？

我们平时看到的网页，文字换行、高度计算、一行显示多少字，基本都是 浏览器 + CSS 说了算。
比如一段很长的文字，浏览器要反复计算字体宽度、重新排列位置，这个过程叫 reflow（重排）。内容越多、列表越长，浏览器算得越累，结果就是：

• 页面卡顿、滚动不丝滑

• 多语言、emoji 排版不稳定

• Canvas / WebGL 里很难做精致排版

• 服务端无法提前算出一致的布局

前端开发者常年被这类问题困扰，耗费了海量时间。

二、Pretext 到底干了一件什么事？

用最通俗的话说：
Pretext 把“文字怎么换行、占多高、怎么排列”，用纯 TypeScript 算法自己算，不再完全依赖 CSS 和 DOM。

它的工作方式非常简单清晰：

1. 只测一次
用浏览器 Canvas 一次性测量好文字、表情、各种语言的宽度，存起来。

2. 之后全靠数学计算
文字高度、行数、换行点，全都用算术公式算出，不再触发重排。

3. 结果随处可用
既能用在普通网页，也能直接画在 Canvas、SVG、WebGL 上，未来还能在服务端计算。

因为全程少了大量浏览器重复操作，它的排版速度比传统方式快很多倍。

三、为什么行业大佬们都在夸它？

Pretext 刚发布就在技术社区刷屏，不少知名账号公开发声支持，让这个工具的分量显得格外真实。

@alexgraveley（Perplexity Computer 联合创建者、GitHub Copilot 核心贡献者）指出：
前端开发者长期在 CSS 布局问题上耗费数亿小时，现在借助 AI 代理可在几周内用纯 TypeScript 解决文本测量算法，实现无需 CSS 和 DOM 的完整网页布局，这标志着界面工程的重大基础性进步。
@rauchg（Vercel CEO）看完演示后更是直言：
我终于可以交付我梦想中的文本布局了。
知名投资人 @saranormous（Sarah Guo） 连续用“Whoaaaaa”“Wow”表达惊讶，认可这是前端与界面工程的重要基础贡献。
@davemorin（Offline Ventures 创始人、OpenClaw 董事会成员）也评价：“So insanely good”，认为它优秀到超乎寻常。

还有开发者关注到它对国际化排版的价值，@ryolu_（Cursor.ai 设计负责人） 就表示：更多中日韩网页排版规则能落地，会带来非常大的体验提升。

四、它的核心原理

传统网页布局路径：
文字 → CSS → DOM → 反复重排 → 显示
Pretext 的路径：
文字 → 一次性测量宽度 → 纯代码计算布局 → 直接输出结果
差别就在于：
只借用一次浏览器的字体能力，之后全是代码运算，没有多余消耗。

它能准确支持中文、英文、阿拉伯文、emoji、双向文字等几乎所有语言，还能对齐 CSS 的常见换行规则，既快又稳。

五、它能解决哪些我们能感受到的问题？

• 长列表滚动更流畅
瀑布流、聊天记录、商品列表，不再因文字高度计算卡顿。

• 页面不再“跳动”
文字高度提前算好，加载时不会挤来挤去。

• 多语言排版更统一
混合各种文字和表情，换行和宽度都能保持一致。

• Canvas / 游戏界面也能精致排版
以前只能简单写字，现在能做出杂志级别的排版效果。

六、它不是万能的，但方向很重要

Pretext 目前也有一些局限：

• 只负责布局计算，不负责完整字体渲染

• 初始化后的文本不能随意修改

• 极窄宽度下只能在完整字符处断开

但它真正的价值，是打开了一个新方向：
未来的界面布局，不一定非要靠 CSS，用代码直接精确计算布局，正在成为可能。

七、总结

Pretext 是一个用纯 TypeScript 实现文字排版的工具，绕开了浏览器传统布局的低效问题，让文字计算更快、更准、适用场景更广。

它不只是一个库，更是 AI 提升底层工程效率的典型案例——过去前端行业耗费海量时间的难题，如今在 AI 辅助下快速被攻克。

对我们普通用户来说，最直接的未来就是：
网页和 App 会越来越流畅，排版越来越精致，不同设备上的显示也会更一致。