知识点拾遗：重绘和回流

重绘

定义：由于节点的几何属性发生改变或者样式发生改变而不会影响布局，称为重绘。

渲染树的回流结束后，根据每个节点的属性样式等进行页面的渲染，这个过程称为重绘。重绘不一定回流。

回流

定义：回流是布局或者几何属性需要改变就称为回流。当渲染树生成之后，需要根据视口大小来计算页面元素的位置及大小，于是从渲染树的根节点开始遍历，这个过程称为回流。

DOM树是渲染树的组成之一，DOM树结构的变化，势必会引起，渲染树对页面的重新渲染。

所以回流必引发重绘。
一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

减少重绘和回流

• 使用visibility替换display:none,因为前者只会引起重绘，后者会引发回流（改变了布局）
• 避免使用table布局
• 在DOM树的最末端改变class，可以限制了回流的范围
• CSS样式避免嵌套过多（CSS样式选择器从右向左查找）
• 避免频繁的操作DOM和修改样式