回流 与 重绘

之前没能好好了解回流与重绘机制以及相应的优化方法，被人问及这方面的知识的时候场面一度很尴尬，回去后读了下张鑫旭大神的文章，充充电，下面是关于回流与重绘的收获。

• 重绘：元素的外观发生改变，但不影响页面的布局。比如一下属性的改变 visibility，background-color
• 回流：浏览器dom节点，元素的大小，位置发生改变，影响了页面的布局。比如我们删除了一个元素，更改元素的width 页面产生了改变。

回流会造成一些相关元素的回流：

1. 子元素
2. 该元素后面的其他元素
3. 父元素，甚至于祖父级元素

 比如一个元素改变宽度， 如果其子元素是浮动的 那么他的子元素的布局会随之改变，
 宽度改变也会使同级元素的位置发生改变，以及把父元素撑开

回流与重绘都会对DOM重新渲染或者改变DOM数的结构所以两者都对性能有很大的影响,但是回流比重绘的代价要大

还有一句话是这样说的： 回流一定重绘， 重绘不一定回流

• 那么都有哪些导致回流呢？

1. 调整页面大小。
2. 改变字体。
3. 增加或者移除样式表。
4. 激活CSS伪类，例如：:hover
5. 更改样式。（包含操作class属性，设置style属性）
6. 脚本（JavaScript）操作DOM。
7. 计算offsetWidth和offsetHeight属性。

• 我们应该如何避免回流？

浏览器会在队列中的操作达到一定数量或者达到一定时间后就会flush队列，进行一次批处理。
这样就把多次的重绘与回流，汇成一次重绘与回流

除了浏览器给我们做的处理外我们自己应该注意哪些。

根据产生的原因我们 避免去做一些操作

1. 如果要改变元素的样式，通过改变样式名class ，不要直接改变style属性。
2. 避免过多的使用内联样式。（因为一个内联样式就会造成一次回流，合成一个外部样式类，就会一次性的改变所有的样式，这样就只会造成一次回流。）
3. 动画应该作用在绝对定位的元素身上（position为absolute）。（position为absolute的元素时完全脱离标准文档流的，改变这类元素的样式造成的回流只影响他的子元素，将回流的影响减小）。
4. 尽量不要使用表格布局，（没有定宽的表格单元格的宽度是由最宽的一格决定的，在最后一个没有加载完之前，宽度是不定的，当最后一行加载完，表格前面的单元格将会重新设置。）

写在最后

纯属学习记录，略显浅薄。 学习的路上.......