React 核心团队成员开源 Pretext，仅几 KB 的纯 TypeScript 库，前端 UI 渲染速度比传统工具快约 500 倍，GitHub 已获 2.8 万 stars
React 核心团队成员开源 Pretext，仅几 KB 的纯 TypeScript 库，前端 UI 渲染速度比传统工具快约 500 倍，GitHub 已获 2.8 万 stars
Pretext 是一个仅几 KB 大小的纯 TypeScript 前端文本布局库，由 Midjourney 前端工程师、React 核心团队成员 Cheng Lou 开源。它跳过了传统的 DOM 测量方式，直接基于浏览器字体引擎进行文本布局计算，将渲染速度提升约 500 倍。
适合场景：需要处理大量文本、动态排版、高性能 UI 的前端项目。
传统方案依赖 DOM 读取尺寸，会强制浏览器重新计算整个页面布局，导致卡顿。Pretext 避开 DOM，使用自研文本测量逻辑，性能提升显著：
Pretext 支持开发者能想到的所有语言，兼容各种浏览器特性差异，包括复杂的 CJK（中日韩）字符处理。
仅几 KB 大小，纯 TypeScript 实现，无需额外依赖。
聊天框的宽度会紧紧贴合文字内容，不会撑满页面整行。滑动时动态调整，体验流畅。
像杂志那样实现多栏布局，同时做到自适应屏幕、内容动态变化。
快速制作可变字体宽度的 ASCII 字符画，用字符拼出图案、人脸、logo 等。
那些在 CSS 里非常棘手的问题，现在变得简单：
Pretext 提供两种使用场景：
在完全不接触 DOM 的前提下，测量一段文本的高度。
import { prepare, layout } from 'pretext';
// 一次性工作：规范化、分段、测量
const handle = prepare(text, config);
// 后续快速计算（纯数值运算）
const height = layout(handle, containerWidth);注意：避免对相同文本重复调用 prepare()，否则会失去预计算的优势。窗口大小改变时，只需重新执行 layout() 即可。
将 prepare 替换为 prepareWithSegments，可以获取每一行的详细信息，实现自定义排版逻辑。
Pretext 上线后，开发者们在 X 上掀起了前端炫技热潮：
有开发者用 Pretext 做出了 3D 迷宫射击游戏《毁灭战士》的 ASCII 字符版，以及文字版打砖块小游戏。
知名歌曲 Bad Apple!! 的黑白影绘视频，开发者让歌词文本通过位移变形特效，拼出了人物、城堡的轮廓，且随音乐旋律丝滑变化。
文本还能模拟类似水面波纹或声波传播的视觉效果，展现出强大的动画能力。
Pretext 的核心创新在于跳出了传统前端排版方案，避开前端 UI 渲染中最费时的 DOM 操作。
传统方案的问题：
Pretext 的解决方案：
更重要的是，这种创新架构天然适配 AI 迭代优化，为未来前端排版的智能化、自动化发展预留了巨大空间。
Cheng Lou 透露，Pretext 的实现是通过向 Claude Code 和 Codex 展示浏览器的真实基准，并让它们在每一个重要的容器宽度下进行测量和迭代，持续运行数周完成的。
他还自曝："Vibe Coding 不够，边等结果边转呼啦圈就是正确的做法。做 Pretext 这个月下来，我人都瘦了快 2 磅。"
Q: Pretext 适合什么项目？ A: 需要处理大量文本、动态排版、高性能 UI 的项目，如聊天应用、文档编辑器、数据可视化等。
Q: 学习成本高吗？
A: API 设计简洁，主要是 prepare() 和 layout() 两个函数，上手很快。
Q: 浏览器兼容性如何？ A: 兼容各种浏览器特性差异，支持所有主流浏览器。
项目地址: https://github.com/chenglou/pretext
相关资源:
港中文 & 快手可灵联合开源 ShotStream，首个实时流式多镜头长视频生成框架，生成速度提升 25 倍，支持边生成边调整情节。
面向开发者的 Seedance 2.0 视频 API 接入指南，覆盖方舟平台开通、API 调用、SDK 示例、TOS 存储与价格注意事项。
Anthropic 给 Artifacts 加上了公开链接分享和多人同时编辑（multiplayer）。本文讲清楚这个能力是什么、怎么用、以及它和 Claude Code Artifacts 的区别。