Reflow
这篇讲的是浏览器渲染流程中那个耗时的操作——Reflow(重排)。文章从CSS规范中“渲染对象”这一底层概念讲起,说明了浏览器如何将DOM节点转化为可视化盒子(Box)来进行布局计算。具体到Mozilla内核,它通过一个名为`frame`的对象来操控这个盒子,并介绍了`frame`的三个核心动作。这为我们理解布局引擎的工作机制提供了一个清晰的微观视角。 Reflow常被笼统地称为“性能杀手”,但作者没有停留在泛泛而谈。通过剖析这些底层对象的操作,文章解释了Reflow为何必然涉及复杂的几何计算:当一个元素的尺寸、位置发生变化,或者插入、删除一个元素时,浏览器可能需要递归地重新计算受影响的整个区域,乃至整棵树的布局。这有助于开发者从原理上理解为何频繁修改样式或DOM会拖慢页面。 对于前端开发者而言,了解这些内部机制,并非为了直接操作它们,而是为了更深刻地认识到写出高性能CSS与DOM操作代码的重要性。知道“锅”是怎么造的,才能更明白该如何“用好”它。