CSS重绘和重排(回流)
一、什么是重绘Repaint和重排 （回流 reflow）
重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制
，使元素呈现新的外观叫做重绘。 重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程
重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）
二、引起重绘Repaint和重排（回流reflow ）的属性
2.1 引起重绘Repaint的属性
| 常见的重绘元素 | ||||
|---|---|---|---|---|
| color | border-style | visibility | background | |
| text-decoration | background-image | background-position | background-repeat | |
| outline-color | outline | outline-style | border-radius | |
| outline-width | box-shadow | background-size | ||
2.2 引起重排（回流reflow）的场景和属性
1.添加、删除可见的dom 2.元素的位置改变 3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性) 4.页面渲染初始化 5.浏览器窗口大小改变
6.设置style属性
7.改变文字大小
8.添加/删除样式表
9.激活伪类，如:hover
10.操作class属性
11.内容的改变，(用户在输入框中写入内容也会)
| 常见的重排元素 | ||||
|---|---|---|---|---|
| width | height | padding | margin | |
| display | border-width | border | top | |
| position | font-size | float | text-align | |
| overflow-y | font-weight | overflow | left | |
| font-family | line-height | vertical-align | right | |
| clear | white-space | bottom | min-height | |
offsetTop |
offsetLeft |
offsetWidth |
offsetHeight |
|
scrollTop |
scrollLeft |
scrollWidth |
scrollHeight |
|
clientTop |
clientLeft |
clientWidth |
clientHeight |
|
getComputedStyle() |
(currentStyle in IE) |
|||
三、如何减少重绘（Repaint）和重排（reflow）
（1）不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class，然后修改 DOM 的 className。 （2）不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。 （3）为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。 （4）千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。) （5）不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）
（6）用translate替代top改变
（7）用opacity替代visibility（在独立图层下优化重绘）
-------------------------------------------------------------------------------------------------
