面试汇总——重绘和重排的区别

本文是面试汇总分支——重绘和重排的区别。

重绘不必定须要重排（好比颜色的改变），重排必然致使重绘（好比改变网页位置）

DOM的变化影响了元素的几何属性，浏览器须要从新计算元素的几何属性，同时其余元素的几何属性和位置也会受到影响，浏览器会使渲染树中受到影响的部分失效，并从新构造渲染树，这个过程是重排，浏览器会从新绘制受到影响的部分到屏幕，这个过程叫重绘。

1>重排(Reflow)：当渲染树的一部分必须更新而且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并从新构造渲染树。

2>重绘(Repaint)：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性从新绘制，使元素呈现新的外观。好比改变某个元素的背景色、文字颜色、边框颜色等等

3>引起重排

1.添加、删除可见的dom

2.元素的位置改变

3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)

4.页面渲染初始化

5.浏览器窗口尺寸改变

6.获取某些属性。当获取一些属性时，浏览器为取得正确的值也会触发重排,它会致使队列刷新，这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。因此，在屡次使用这些值时应进行缓存。

4>优化：

浏览器本身的优化：

浏览器会维护1个队列，把全部会引发重排，重绘的操做放入这个队列，等队列中的操做到必定数量或者到了必定时间间隔，浏览器就会flush队列，进行一批处理，这样屡次重排，重绘变成一次重排重绘

减小 reflow/repaint：
（1）不要一条一条地修改 DOM 的样式。能够先定义好 css 的 class，而后修改 DOM 的 className。

（2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
（3）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。
（4）千万不要使用 table 布局。由于可能很小的一个小改动会形成整个 table 的从新布局。(table及其内部元素除外，它可能须要屡次计算才能肯定好其在渲染树中节点的属性，一般要花3倍于同等元素的时间。这也是为何咱们要避免使用table作布局的一个缘由。)

（5）不要在布局信息改变的时候作查询（会致使渲染队列强制刷新）

感谢：重绘和重排