Pretext：无重排的文本测量，0.05 ms

Pretext：无需浏览器重排的文本测量革命

Pretext 解决了前端开发中一个长期存在的问题：无需布局重排即可精确确定文本尺寸。在 30 年的 Web 开发历史中，测量一行文本的高度或宽度需要将元素插入 DOM，这会触发昂贵的重排操作并导致 FPS 下降。这对于涉及数百次测量的虚拟化列表、聊天界面和 Masonry 布局至关重要。

Pretext 在 DOM 外部工作：prepare() 方法将文本拆分成段落，使用 Canvas API 测量它们，并缓存度量值。layout() 方法使用纯数学计算换行和最终尺寸。结果：处理时间从 94 ms 降至 0.05 ms——速度提升数千倍。

这种方法颠覆了传统范式：浏览器高效渲染文本，但对文本几何信息的查询响应很差。Pretext 先计算后渲染，提升了动态界面的速度和准确性。

实际应用场景

该库特别适用于：

• 带有消息虚拟化的聊天和即时通讯应用。
• 元素高度不一的 Masonry 布局列表。
• 包含文本元素的 Canvas 和 WebGL 界面。
• SSR 应用，用于在服务器端预计算尺寸。

基准测试的细微差异与缓存和字体细节有关，但核心原则不变：数学计算比浏览器操作更廉价。

前端其他新闻

Node.js 发生了变化：暂停漏洞赏金计划并发布安全更新，表明生态系统中可能存在潜在漏洞。

EmDash 提供了一个无服务器的 WordPress 替代方案，使用 TypeScript 实现，插件运行在沙箱中，并采用严格的访问控制。

Inertia 3.0 简化了技术栈：放弃 Axios，转而使用内置 HTTP 客户端，支持原生 SSR，并引入乐观更新，从而减少依赖并提升开发者体验 (DX)。

TanStack Router 通过 signals 图引入细粒度响应性，而不是使用单一的全局存储。这最小化了不必要的重渲染，并加速了导航。

防范供应链攻击

一个简单实践：安装包前要求其“年龄”至少 3–7 天。这能过滤掉新发布的恶意包，阻挡大多数供应链攻击。

• 安装前检查版本发布日期。
• 将最小年龄规则集成到 CI/CD 中。
• 结合仓库检查和维护者活跃度。

npm 中的可信发布使用来自 GitHub Actions 的 OIDC：令牌不在 CI 中存储，部署通过验证通道进行。

响应性：Signals 实战

Signals 是 Vue.js 和 SolidJS 中的一种推拉式响应性机制。该算法通过图跟踪依赖关系：拉取阶段收集使用的 signals，推动阶段仅更新相关节点。

优势：

• 细粒度更新，无需全局重渲染。
• 静态图分析带来的可预测性能。
• 适用于拥有数千状态的大型应用的可扩展性。

关键要点

• Pretext 无需重排将文本测量速度提升 1000 倍以上，非常适合虚拟化场景。
• 最小包年龄是防范供应链攻击的基本防护措施。
• 带有 signals 图的 TanStack Router 减少了导航开销。
• Signals 为现代框架提供细粒度响应性。
• Node.js 安全发布提醒需检查依赖。

整体新闻凸显了 2026 年前端开发向性能和安全优化转型的趋势。

— Editorial Team