浏览器的重绘与重排

重绘与重排的概念与区别

重排

当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。

重绘

当一个元素的外观发生变化，但没有改变布局，重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观变化。

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分。

重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而项目之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

重绘不一定会出现重排，重排必然会出现重绘

如何触发重排和重绘

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

• 添加、删除、更新DOM节点
• 通过display:none;隐藏一个DOM节点——触发重排和重绘
• 通过visibility:hidden;隐藏一个DOM节点——只触发重绘，因为没有几何变化
• 移动或者给页面中的DOM节点添加动画
• 添加一个样式表，调整样式属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动。

如何避免重绘或者重排

• 集中改变样式，不要一条一条地修改DOM样式。
• 不要把DOM节点的属性值放在循环里，当成循环里的变量
• 为动画的HTML节点使用 flex布局或者 position:absoult；那么修改他们的css是不会导致重排的。
• 不使用table布局，因为可能很小的一个改动会造成整个table的重新布局
• 避免循环添加DOM节点，可以把子元素添加到一个盒子里，最后再插入元素中