重排（reflow）和重绘（repaint）的区别，元素的隐藏与显示

重排一定引起重绘，重绘不一定引起重排

display:none会引起回流和重绘，visibility:hidden会引起重绘

重绘（reflow）：
       重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。

重排/回流（reflow）：
       当渲染树中的一部分(或全部)因为元素的尺寸，布局，隐藏等改变而需要重新构建, 就会发生回流现象。浏览器第一次加载页面的时候就是回流（正常）。

重排的原因：

1. 任何页面布局和尺寸（盒子边距）属性的改变都会触发重排：
2. 添加或删除可见的DOM元素
3.元素位置的改变，或者使用动画
4. 浏览器窗口尺寸的变化
 

重绘的原因：

重绘指的是当dom树元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color，visibility，outline等。

display

visibility

overflow