重绘:就是元素的结构(宽高、布局、显示隐藏、内部文字大小)未发生改变,只是元素的外观样式发生改变,
比如加个背景颜色 改变一下文字颜色 改变一下边框的颜色 这些都是会导致页面重绘的
回流:就是元素的结构(宽高、布局、显示隐藏、内部文字大小)等发生改变 ,改变了页面的布局,可能影响的只有自己 也可能影响了父元素、甚至追溯到更多的祖先元素发生改变,则会导致元素内部、周围甚至整个页面的重新渲染,页面发生重构,回流就产生了。
总结:
1. 回流必将引起重绘,而重绘不一定会引起回流。例如:只有颜色改变的时候就只会发生重绘
而不会引起回流。
2. 很显然重绘的速度快于回流。
如何避免(减少)回流?
css
- 避免设置多层内联样式。
- 如果需要设置动画效果,最好将元素脱离正常的文档流。
- 避免使用CSS表达式(例如:calc())。
- 避免频繁操作样式,最好将样式列表定义为class并一次性更改class属性。
- 避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中。
- 可以先为元素设置为不可见:display: none,操作结束后再把它显示出来。