重排：当渲染树中的元素尺寸、布局隐藏等改变需要重新构建。每个页面至少需要一次回流。（页面初始渲染、添加删除DOM元素、位置变化、元素尺寸、浏览器窗口尺寸、元素填充内容改变、读取某些元素属性（offsetLeft/Top/Height/Width等））
重绘：一个元素的外观改变所触发的浏览器行为浏览器会根据元素新的属性来重新绘制，使元素呈现新的外观。触发条件：改变元素外观属性，如color、background-color等
重绘和重排关系：重排必会引发重绘，但重绘不一定不重排。
重绘重排的代价：耗时，导致浏览器卡慢。
减少重绘和重排的措施
1.一次性改变样式
var div = document.querySelector("div");
div.style.cssText = "padding:5px;border:1px";
// 或者直接通过div.className添加类
2.隐藏元素，进行修改后，再显示
let ul = document.querySelector(".list");
ul.style.display = "none";
appendNode(ul, data);
ul.style.display = "block";
3.使用文档片段创建一个子树，然后再拷贝到文档中
let fragment = document.createDocumentFragment();
appendNode(fragment, data);
ul.appendChild(fragment);
4.将原始元素拷贝到一个独立的节点中，操作这个节点，然后覆盖原始元素
let ul = document.querySelector(".list");
let clone = ul.cloneNode(true);
appendNode(clone, data);
ul.parentNode.replaceChild(clone, div);
5.缓存布局信息
current = div.offsetLeft;
div.style.left = 1 + ++current + 'px';
div.style.top = 1 + ++current + 'px';
