简单理解重绘、回流（重排）

1. 解析html，生成dom树；解析css，生成css dom树
2. dom树和css dom树结合生成渲染树
3. 对渲染树进行布局
4. 绘制渲染树

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建就叫回流（reflow）。
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的就叫重绘（repaint）。
简单来说，当我们删除增加节点，或者修改元素的宽高的时候，页面布局会发生变化，DOM树结构会发生变化，那么会重新构建DOM树，DOM树构建完后，又会重新构造渲染树，再去渲染界面，这个过程就叫做回流。
当我们改变元素的属性，只会影响外观不会影响到布局的时候，dom不需要重新构造，只会改变渲染树，然后重新渲染界面，这就叫重绘。
所以，回流一定会引起重绘，重绘不一定会引起回流。
因此，回流的开销要比重绘大，我们要尽量避免引起回流。
tips: display:none的节点是不会渲染的（脱离了文档流），但是visibility和opacity隐藏的几点还是会渲染的。script、meta、link这些节点也不会渲染。

1. 添加或删除可见的DOM元素
2. 元素的位置发生变化
3. 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
4. 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
5. 页面一开始渲染的时候（所有组件都要进行首次布局，这是开销最大的一次回流）
6. 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）resize事件发生时

1. 对于几何属性的变化，元素高度变化，字体大小变化这些，如果要修改多个属性，最好放到一个class中，直接修改class名称。
2. 将position属性设置为absolute或fixed，设置为脱离文档流，它的改变不会影响到其他元素布局。
3. 离线处理：当对 dom 节点有较大改动的时候，先将元素脱离文档流，然后对元素进行操作，最后再把操作后的元素放回文档流。只会在隐藏和展现的时候引发两次回流和重绘。
   1）改变 display 属性，改为none，临时将某个元素从文档流中脱离，然后再block恢复它

var ul = document.getElementById('list');
ul.style.display = 'none';
// 对 ul 进行操作
ul.style.display = 'block'

2）createDocumentFragment，创建文档片段，操作后一次性把文档片段添加到文档流中（适用于需要添加很多节点的时候）

var fragment = document.createDocumentFragment()
// 在 fragment 上进行一系列操作
document.getElementById('list').appendChild(fragment)

3）通过在需要操作的节点上创建副本（cloneNode），然后在副本上进行操作，最后进行替换（replaceChild）

var ul = document.getElementById('list');
var clone = ul.cloneNode(true);
// 对 clone 节点进行操作
ul.parentNode.replaceChild(clone, ul);

参考于：
https://segmentfault.com/a/1190000017329980
https://www.cnblogs.com/echolun/p/10105223.html