js中的重绘与重排的区别

一个页面渲染完毕后，随着用户的操作或请求数据的变化，都会导致网页的重新渲染。根据不同的触发条件，重新渲染分为重排(reflow)和重绘(repaint)两种情况。

重绘：当一个元素视觉表现属性改变时，会触发重绘。例如元素背景颜色的改变、字体颜色的改变、边框颜色的改变、透明度的改变等。

重排：当渲染树的一部分或全部更新而导致网页结构或节点尺寸发生改变时，都会导致重排。例如可见元素节点的添加和删除、改变元素的尺寸(元素宽、高、内边距大小、边框大小)、浏览器窗口大小发生改变等。

减少页面重绘与重排的方法：

1、尽可能将css属性的读、写分开进行。

2、尽量不要对style或class中的属性进行一条一条的更改，尽量使用class或csstext进行批量更改。

3、不要使用table布局。因为可能一个很小的改变而导致整个table重新布局。

重绘和重排的注意点：

1、当页面发生重排时一定会导致重绘，而重绘不一定导致重排。例如：透明度发生改变时会导致重绘而不会导致重排。

2、不可见的元素不会影响重绘与重排。