1.9 KiB
1.9 KiB
从浏览器排版到 Pretext：高性能文本布局源码教程
这份教程回答一个问题：Pretext 为什么能很快地算出一段文字的换行与高度？
读完后，你应该能解释它的性能来源，沿着函数调用读懂核心源码，并知道如何在自己的界面中使用它。只需要了解 JavaScript 函数、数组和基本 DOM；字体、字素、回流等概念会逐步解释。
分析基于上游提交 0d102a5cd933611e86a7e60bda7b4baa5995c6b0，研究日期为 2026 年 10 月 28 日。本文描述这个版本，不把早期实现或未来版本的行为混在一起。源码链接指向本次研究的上游版本；实验脚本和记录随文保存在本站。
阅读路线
- 第一章：为什么算文字高度也会慢
- 第二章：先看懂 prepare 与 layout 的分工
- 第三章：分析阶段如何把文字变成可布局的分段
- 第四章：测量缓存如何减少浏览器工作
- 第五章：换行算法为什么能变成数值循环
- 第六章：为什么只求高度比拿到每行文字便宜
- 第七章：如何避免长文本拖垮算法
- 第八章：准确性怎样影响性能设计
- 第九章：把它接进界面和虚拟列表
- 第十章：亲自验证性能机制
- 第十一章：按什么顺序读源码
- 第十二章：把这些设计迁移到自己的代码
第一次阅读建议顺着读到第六章，再看第九章。第四、七、八章适合对照源码细读；第十章提供实验与复现方法。