这Pretext一周吸金40K，究竟多疯狂？

这周的前端圈，Ke以说是被一个叫 Pretext 的项目彻底刷屏了。

短短几天GitHub 狂揽 41K+ Stars ⭐⭐⭐。

hen多刚入行的小伙伴kan完官方那个极简的 Readme 可Neng一头雾水：不就是一个算文本长宽高的 JS 库吗？为啥Neng火成这样？CSS 的 word-wrap 和 flex 难道不够用吗？

前端开发有个大难题：一串动态文本渲染出来到底有多高？

设想一个极度真实的业务场景：你在Zuo一个拥有十万条数据的 虚拟滚动列表。为了让列表丝滑，你只Neng渲染视口内的那 条数据。但问题来了每条数据里的用户评论长度是不固定的。有的人发了一句 哈哈😁，有的人发了 字的写字楼小作文。在渲染之前，你必须提前知道每一行的高度，才Neng计算出整个虚拟列表的滚动条位置和绝对定位的 top 值。

在 Pretext 出现之前，我们是怎么Zuo的？用的往往是Zui原始、极其粗暴的 离屏 DOM 测量法

// 极其恶心的传统测量法：DOM 测算
function measureTextHeightOldWay {
  // . 创建一个隐藏的 div 
  const hiddenDiv = document.createElement;
  hiddenDiv.style.visibility = 'hidden';
  hiddenDiv.style.position = 'absolute';
  hiddenDiv.style.width = `${width}px`;
  hiddenDiv.style.fontSize = `${fontSize}px`;
  hiddenDiv.innerText = text;
  // . 强行塞入 DOM 树
  document.body.appendChild;
  // . 读取高度
  const height = hiddenDiv.offsetHeight; // 或者 getBoundingClientRect
  // . 销毁 DOM
  document.body.removeChild;
  return height;
}

代码kan着没毛病？但Ru果在初始化时你在一个循环里把这段代码跑了 次你的页面会当场卡死白屏！

// 使用 Pretext import{ measureText }from'pretext'; functionmeasureTextHeightNewWay {// 没有任何 DOM 操作!直接传入参数计算 constmetrics =measureText; returnmetrics.height;}

对比一下这带来了什么工程级别的质变？

快到离谱： 因为不触碰任何 DOM API，不会引起一丝一毫的浏览器重排。同样的测量 条数据，用传统 DOM 法可Neng需要 ，用 Pretext 只需要 。

解锁 Web Worker 潜Neng： 以前因为要操作 DOM，测量文本的脏活必须在浏览器的主线程干，极容易阻塞页面。现在它是纯 JS 计算了你完全Ke以把这十万条文本高度的计算逻辑，扔到 Web Worker 里去并行跑！主线程依然丝滑如初。

Pretext vs getBoundingClientRect ：

复杂数据kan板 / 大规模动态虚拟列表： 前面提到的，需要提前精确知道变长文本高度，来进行复杂绝对定位计算的场景。

Canvas / WebGL 富文本渲染： 用过 Canvas 的人dou知道，Canvas 里的 原始，根本不支持自动换行。以前我们在 Canvas 里画多行文本简直是噩梦，现在Ke以直接用 Pretext 算好每一行的位置，然后精确绘制。