重绘和重排
重绘和重排
重绘
DOM 的变化影响到了预算内宿的几何属性比如宽高，浏览器重新计算元素的几何属性， 其他元素的几何属性也会受到影响，浏览器需要重新构造渲染树，这个过程称之为重排，
重排
浏览器将受到影响的部分重新绘制在屏幕上 的过程称为重绘。
原因
引起重排重绘的原因有：
- 添加或者删除可见的 DOM 元素
- 元素尺寸位置的改变 浏览器页面初始化，
- 浏览器窗口大小发生改变，重排一定导致重绘，重绘不一定导致重排，
减少重绘重排的方法
减少重绘重排的方法有：
不在布局信息改变时做 DOM 查询
浏览器的优化
浏览器本身携带一些优化方式，浏览器会把回流和重绘的操作积攒一批，当操作达到一定数量或者到达时间阈值，然后做一次reflow，称为异步reflow或增量异步reflow。但是有些情况浏览器是不会这么做的，例如resize窗口，改变了页面默认的字体等等。对于这些操作，浏览器会马上进行reflow。
最小化操作
由于重绘和回流可能代价比较昂贵，因此最好就是可以减少它的发生次数，为了减少发生次数，我们可以合并多次对DOM和样式的修改，然后一次处理掉，或者将样式事先设计好，动态去改变class。
离线修改DOM
使用documentFragment对象在内存里操作DOM，在内存中的DOM修改就是让元素脱离文档流，当然是不会触发重绘的，将对DOM的所有修改批量完成，想怎么改就怎么改，然后将节点再放入文档流中，只触发一次回流。
绝对定位
使用绝对定位脱离文档流，使其不影响其他元素。对于复杂动画效果，由于会经常的非常频繁的引起回流重绘，可以使用绝对定位，让它脱离文档流，否则会引起父元素以及后续元素频繁的回流
避免多层内联样式
通过style属性动态设置样式是在操作一个很小的DOM片段，容易导致多次回流。避免设置多级内联样式，样式应该合并在一个外部类，这样当该元素的class属性可被操控时仅会产生一个reflow。
末端改动
尽可能在DOM树的最末端或者是层级较低的节点改变class，回流可以自上而下，或自下而上的回流的信息传递给周围的节点。回流是不可避免的，但可以减少其影响。末端节点或者低层级节点的修改可以限制回流的范围，使其影响尽可能少的节点，当然其也有可能引发大面积回流。