1、什么是重绘、回流
重绘(repaint):当元素样式改变而不影响元素在页面中的位置时,浏览器对元素进行更新这就是重绘;
回流(reflow):当元素样式改变而影响到其在页面中的位置和大小时,浏览器将对页面重新计算渲染树,这就是回流
二者之间的关系:发生回流一定会触发重绘,但是触发重绘不一定会发生回流;
举个简单的例子:
因为元素的颜色的改变会导致元素的样式改变此时就触发了重绘,但是其并没有影响其在页面的位置和大小所以就没有触发回流;
但是元素通过定位或者改变大小导致样式的改变此时即符合重绘的定义也符合回流的定义;因而即触发了重绘又触发了回流;
DOM 样式发生了变化,但没有影响到页面布局时,会触发重绘,而不会触发回流。
重绘由于 DOM 位置信息不需要更新,省去了布局过程,因而性能上优于回流