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