Cheng Lou(之前在 React、Messenger、Midjourney 团队干过)他发的这条帖子,已经快800 万浏览了。 这个帖子很多人乍一看,估计心情跟我一样:“我完全不知道这是什么但看起来很重要"。 实际上,他做了一个纯 TypeScript 的文字测量库,叫 pretext。 网页上文字怎么排列,之前是浏览器帮你算的。一段话塞进一个 300px 的框,会换几行、总共多高,你提前不知道。唯一的办法是先把文字塞进 DOM,让浏览器排完,再回头问它:这段话占了多高? 浏览器回答这个问题的过程叫 reflow。reflow 是网页卡顿的头号原因。 过去 20 多年没有别的办法。想知道文字高度就得触发 reflow。一个死循环:你想在渲染之前知道尺寸,但得先渲染才能知道。 所以聊天记录往上翻会跳,瀑布流先闪一下再归位,"虚拟滚动 + 不定高"在前端是公认的噩梦级问题。 Cheng Lou 用纯 JavaScript 复刻了浏览器的文字排版算法。不碰 DOM,不触发 reflow,直接算。 效果: - 10 万个不定高文字卡片,120fps 滚动 - 聊天气泡自动收缩到最窄宽度 - 杂志式多栏排版,响应式动态重排 - 自动增高文本框、手风琴展开,全变成了附赠小功能 他在 thread 里说了句我觉得挺准的话: "Web 搞了 20 年,弄出一个巨复杂的东西。效果就这样的话,砍掉 90% 的 API 也够用了。要对得起这个复杂度,效果应该好 10 倍才对。结果两头都没占到,读文章不好用,做交互也不好用。" 这件事在 AI 时代还有一层意义。文字布局变成了一个纯函数:输入文字、字体、容器宽度,输出精确的高度和位置。AI 生成 UI 的时候可以直接调这个函数,不用去理解 CSS 那套复杂的规则。 前端正在发生一个有意思的变化,就是有人发现可以不再等 CSS 进化了,直接绕过去。