我们先举个简单的栗子“栗子”，以便帮助我们的这么理解，
1，
当Render树中的一部分(或全部)因为元素的规模尺寸、布局、显隐等改变而需要重新构建，这就称为回流。
当Render树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不影响布局，比如background-color，就称为重绘。
注意：回流必将引起重绘，而重绘不一定会引起回流。
以上，其实理解起来很容易，所谓的Render树就是识别了几何属性的Dom树，好像我们画人体的时候，Dom树是先确定都有什么，比如四肢，头部，身体，其他器官等；而Render树则是确定这个人的高矮胖瘦，头发是否盖眼睛等。如果我们在绘画过程中发现脖子长了那就惨了，脖子下面都要重画，如果发现只是手指画的有问题，我们只需要重画手指，这就是回流了。当我们的Render树完事了，也就是人体大概轮廓我们都画好了，就可以上色了，换个发色这种我们叫重绘。
再比如：
var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));
一 ：回流何时发生？
当页面布局和几何属性改变时就需要回流，下述情况会发生浏览器回流：
页面渲染初始化
添加或者删除可见的DOM元素；
DOM元素的几何属性变。
内容改变。
浏览器窗口尺寸改变。
获取某些属性
二 ： 怎么减少回流和重绘？
1、在内存中多次操作节点，完成后再添加到文档中去。
2、将那些改变样式的操作集合在一起，直接改变className。如果动态改变样式，则使用cssText。
3、将需要多次重排的元素，脱离文档流。
4、尽量不要使用表格布局。
5、让要操作的元素进行”离线处理”，处理完后一起更新。
6、在需要经常取那些引起浏览器重排的属性值时，要缓存到变量。