前端圈疯传！比传统 DOM 快 500 倍！抛弃 HTML + CSS + DOM？

前端其实一直有个大家心照不宣的“脏秘密”。你每次写el.getBoundingClientRect() el.offsetHeight只是想知道一段文字多高。但浏览器为了回答你这个问题往往要做一件非常昂贵的事重新计算整个页面的布局Reflow这是Web性能里最贵的操作之一。而我们——这样写了 20 年。 这个问题到底有多严重很多经典性能问题其实都指向同一个根源聊天气泡一输入就抖瀑布流高度总是对不齐虚拟列表必须“猜高度”页面加载时内容突然跳动本质都是一句话❗文本尺寸必须通过浏览器才能知道而浏览器的代价是Style → Layout → Paint你只是想“量一下”却触发了一整套渲染流程。 困扰前端 20 年这个地狱级难题终于解决了3 月 28 日一个项目在前端圈突然爆火。作者是Cheng Lou——React、ReasonML、ReScript的核心参与者后来在MidJourney工作。他在X上发布了一个项目Pretext短短一天时间阅读量突破千万级GitHub Star迅速破万持续增长中评论区全是业内大佬shadcn、Guillermo Rauch、Ryan Florence 等可以说是——一夜刷屏前端圈他自己形容这个项目“我从地狱深处爬回来带回了这个东西。” Pretext 是什么一个用 TypeScript 写的“文本布局引擎”image更具体一点它可以在完全不依赖 DOM 的情况下精确计算文本排版结果。传统方式文本 → 放进 DOM → 浏览器 layout → 再测量Pretext文本 → JS 计算 → 直接得到布局结果 关键区别❌ 不调用getBoundingClientRect❌ 不触发 reflow❌ 不依赖 DOM⚙️ 它是怎么做到的核心思路其实很“反常识” 别问浏览器我自己算第一步建立“度量体系”用浏览器的字体引擎作为基准canvas.measureText()获取每个字符的真实宽度。第二步一次性处理prepareconst prepared prepare(text, font)所有复杂计算分词、测量只做一次第三步纯计算布局layoutconst { height } layout(prepared, width, lineHeight)纯数学运算零 DOM零 reflow⚡ 为什么会快 500 倍 这么多很多人看到“500 倍”会误解。其实本质不是JS更快而是它完全绕开了浏览器最慢的部分layout对比一下传统方式读 DOM → 触发 layout → 阻塞主线程Pretext纯计算 → O(n) → 可缓存结果就是layout可以达到微秒级大规模文本也能120fps 核心亮点零 Reflow测量文本不再触发浏览器布局prepare layout 架构prepare慢一次layout快无限次同一段文本可以被反复布局多语言支持中文 / 英文 / 韩文RTL阿拉伯语Emoji混排极致性能支持数十万文本项计算适合虚拟列表 / AI UI / Canvas完全可控文本布局变成“数据”而不是浏览器黑盒 如何快速使用安装npm install chenglou/pretext示例const prepared prepare(你好世界 Hello , 16px Inter) const { height } layout(prepared, 320, 20)整个过程不访问DOM不触发reflow直接得到高度需要明确一点Pretext不负责CSS layoutflex / grid渲染选中 / copy / SEO它只做一件事文本布局计算Canvas / WebGL UI 场景文本可以进入GPU渲染流程不再依赖DOM fallback 那未来会不会抛弃 HTML CSS DOM这是最有意思的问题。答案是❌ 不会马上替代✅ 但会改变一部分架构更可能的未来是数据 → JS layoutPretext → 任意渲染DOM / Canvas / WebGL也就是说布局不再完全属于浏览器这也是 UI 架构的一次方向性变化。 真实案例前面讲了这么多可能还是有不少同学会问到底能用在哪效果有多明显我们来看几个更“落地”的场景。案例查看案例汇总https://somnai-dreams.github.io/pretext-demos/shrinkwrap-showdown.htmlpretext-playgroundhttps://pretext-playground.builderz.dev/Github 地址https://github.com/chenglou/pretext