闻乐 发自 凹非寺量子位 | 公众号 QbitAI请问可以入职《预言家日报》吗谁能想到哈利波特的魔法报纸居然被本麻瓜用前端做出来了doge。这个大段文本和喷火龙插画的实时动态环绕混排效果直接给到一个夯。Bad Apple也被玩出了文字影绘的新花样经典果然永不过时如此丝滑不卡顿的文本渲染直接闪瞎眼了有没有这是这两天爆火的开源项目Pretext一个专为AI时代打造的新型文本测量与布局库。上线短短两天狂揽*12k star。Pretext完全绕过了传统的DOM测量方式浏览器给JS提供的、用来读写和修改网页内容的接口纯JavaScript/TypeScript编写专门搞文本排版计算。也就是说它不会调用getBoundingClientRect或offsetHeight这类会触发页面重排的API用纯数学计算就能完成文本布局。而且中文、英文、小语种……甚至各种奇怪的表情符号都能精准处理。还能针对Chrome、Safari、Firefox等各类浏览器在排版细节上的差异行为进行专门适配。比如阿拉伯语标点合并方式、Emoji宽度处理等计算结果可以自由输出到DOM、Canvas、SVG。项目的核心开发者是前React核心之一、ReasonML和Midjourney前端背后的男人ChengLou。果然大佬就是大佬佩服.jpg。丝滑太丝滑那这个库到底能玩出什么花来咱先挨个盘一盘。比如在展示海量文本列表时传统方案必须频繁查询DOM才能知道每一项高度极易卡顿。而Pretext可以提前算出所有文本的精确高度让列表在滚动、缩放时能够快速判断哪些内容需要显示实现超高流畅度的虚拟列表效果。它可以根据文本内容自动计算出最紧凑的宽度让气泡完美贴合文字无需DOM测量即可实现类似微信、IM工具的自适应气泡样式实现缩放效果。多栏杂志式布局可以让文本在多列之间自动流畅流动窗口大小变化时就能实时重新排版带动态响应的那种。当然了还有炫技的文字、插画混排哪怕人物在画面中动态移动文本也会毫秒级自动避让、实时重排。如此丝滑难怪网友根本停不下来告别DOM现在咱知道Pretext能做出什么了那就要问了它凭啥能做到这些这就得从传统方式的老大难说起了。在Web里想知道一段文字有多高标准做法就是把它塞进DOM然后调getBoundingClientRect() 或offsetHeight去量。这俩API一调用浏览器就得停下来重新计算整个页面的布局才能给出答案。这个过程叫布局回流。一个段落当然没事但假如你在做一个虚拟滚动列表需要同时测量500条评论的高度那每帧就可能被占掉30毫秒以上。而浏览器渲染一帧的预算总共只有16.67毫秒结果就是卡成PPT。那Pretext是怎么绕开这个死胡同的呢它的思路贼简单——把重活只做一次剩下的全是纯数学运算。它把所有文本处理拆成两个阶段。第一阶段叫 prepare()是一次性预处理。对文本分词、应用排版规则再用Canvas的measureText()去量每个片段的宽度。不过这一步完全不会触发布局只是问浏览器字体引擎要数据然后把所有词宽数据缓存起来。第二阶段叫layout()是一条纯粹的数学热路径。拿着缓存好的词宽数据在给定容器宽度下做换行运算没有DOM读取没有Canvas调用也没有字符串分配可以被无限次反复调用。这样下来处理500段文本prepare()大约需要17毫秒但只跑一次而layout()只需要0.10毫秒每次窗口缩放都能重新触发。相比传统DOM测量方式这可是300到600倍的速度差距。有了这套机制打底Pretext就可以放心地把算力全花在排版本身了。多语言、表情符号、双向文本混排适配各类浏览器的特殊排版细节……而且它只负责计算不负责渲染所以算出来的结果可以自由输出到DOM、Canvas、SVG甚至未来的服务端渲染。Pretext的接入方式也很简单安装通过npm完成npm install chenglou/pretext想在项目里用Pretext只需要import { prepare, layout } from “chenglou/pretext”典型的使用流程分为两步。先用prepare()对文本进行一次预处理得到一个包含词宽等数据的句柄之后在任何需要测量布局的地方调用layout()传入容器宽度和行高即可获得总高度与行数。对于需要逐行控制布局的场景比如实现文字绕开特定形状喷火龙可以改用高级API。prepareWithSegments()返回更细粒度的数据结构配合layoutNextLine()逐行获取排版结果每一行都能单独指定不同的可用宽度。此外项目还提供了辅助工具。setLocale() 用于指定区域语言默认自动适配系统clearCache() 可以在频繁切换字体时主动释放缓存。只能说DOM测量恐怕要江湖再见咯项目地址https://github.com/chenglou/pretext/参考链接[1]https://x.com/_chenglou/status/2037715519277760531[2]https://x.com/birdabo/status/2038219452337074677一键三连「点赞」「转发」「小心心」欢迎在评论区留下你的想法—完— 点亮星标 科技前沿进展每日见