重绘与回流

重绘

重新绘制，当js操作样式发生改变，并且没有影响布局的时候，只发送重绘。

var div = doucment.querySelector('div');
div.style.background = 'red';
//只改变了样式，只会重绘

回流

如果样式发生改变，并且影响到了页面布局浏览器会进行回流。

回流必定有一次重绘

div.style.width = "10px";
//改变了页面的布局，会造成回流

• 回流会重新绘制整个页面，非常消耗性能。

div.style.background = 'red';//重绘
div.style.width = "10px";//回流+重绘
div.style.height = "10px";//回流+重绘
div.style.color = "red";//重绘

• 比较聪明的浏览器不会每次触发回流就重新渲染一次，而是维护一个队列。
• 当这个队列积累了10~20个的回流重绘时才真的进行一次回流。

强行让浏览器进行回流

• 当我们需要使用offsetWidht/offsetHeight的时候，可以让浏览器自动进行一次回流。
• 因为如果不回流来确定当前元素的宽高，获取的宽高就不准确了。

1、 添加或者删除可见的DOM元素；

2、元素位置改变；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时；