对重排reflow（回流）和重绘repaint的理解

概念理解

DOM的变化影响到了元素的几何属性（宽高）,浏览器重新计算元素的几何属性，其他元素的几何属性和位置也会受到影响，会影响到布局结构的情况，浏览器需要重新构造渲染树，这个过程称为重排，
浏览器将受到影响的部分重新绘制到屏幕上的过程称为重绘。如color，background-color

引起重排的原因有

1. 添加或者删除可见的DOM元素，
2. 元素位置、尺寸、内容改变，
3. 浏览器页面初始化，
4. 浏览器窗口尺寸改变，重排一定重绘，重绘不一定重排

减少重绘和重排的方法：

1. 使用cssText或者className一次性改变属性
2. 让要操作的元素进行”离线处理”，处理完后一起更新；
   a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
   b) 使用display:none技术，只引发两次回流和重绘；
   c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

documentFragment的学习https://www.cnblogs.com/echolun/p/10098752.html
简单理解：documentFagment不属于真实dom树的一部分，它的改变不会导致回流，对其进行添加和删除时不回影响性能，所以可以当作一个暂时的节点储存器，当对documentFragment修改完成后，再一次性加入到dom树中，可以减少回流

3. 对于多次重排的元素，如动画，使用绝对定位脱离文档流，让他的改变不影响到其他元素