什么是重排和重绘

浏览器下载完页面中的所有组件 html标记,javascript,css,图片之后会解析生成两个内部数据结构Dom树和渲染树.
Dom树表示页面结构,渲染树表示Dom节点如何显示.dom树中的节点在渲染树中至少有一个对应存在的节点(隐藏元素没有对应节点).渲染树中的节点被称为“帧”或“盒”,符合css模型的定义,理解页面元素为一个具有填充，边距，边框和位置的盒子。一旦DOM和渲染树构建完成，浏览器就开始显示(绘制)页面元素.
当DOM的变化影响了元素的几何属性(宽和高),浏览器需要重新计算元素的集合属性,同样其他元素的几何属性和位置也会因此受到影响.这时会重新绘制构造渲染树，而这个过程就被称为重排.完成重排后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但由于table 需要计算时间需要三倍所以我们避免使用 table 布局。
也不是所有的DOM变化都会影响几何属性，比如改变一个元素的背景色并不会影响到宽度和高度，这种情况下只会发生重绘。

重绘和重排的耗能问题

重排和重绘的代价

例子

var times = 15000;

// code1 每次过桥+重排+重绘
console.time(1);
for(var i = 0; i < times; i++) {
document.getElementById('myDiv1').innerHTML += 'a';
}
console.timeEnd(1);

// code2 只过桥
console.time(2);
var str = '';
for(var i = 0; i < times; i++) {
var tmp = document.getElementById('myDiv2').innerHTML;
str += 'a';
}
document.getElementById('myDiv2').innerHTML = str;
console.timeEnd(2);

// code3
console.time(3);
var _str = '';
for(var i = 0; i < times; i++) {
_str += 'a';
}
document.getElementById('myDiv3').innerHTML = _str;
console.timeEnd(3);

// 1: 2874.619ms
// 2: 11.154ms
// 3: 1.282ms

大家会发现每次声明dom 所造成的过桥重排+重绘
消耗了巨大的时间
所以大家要避免dom 声明多次引起不必要的性能损耗

重排何时发生

很显然，每次重排都会导致重绘以下情况会发生重排
1.添加或者删除可见的DOM元素
2.元素位置改变
3元素的尺寸改变
4元素的内容改变(例如，一个文本)
5页面渲染初始化
6浏览器窗口尺寸改变

渲染树变化的排队和刷新

var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';
三次样式改变引起重排和重绘，所以总共有三次重排重绘过程,但是浏览器并不会这么笨,他会把三次修改'保存'起来,一次完成
var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';

// here use offsetHeight
// ...
ele.style.padding = '5px'
当你使用或者获取布局信息会导致队列刷新，就会造成两次重排重绘,尽量不要在布局信息改变时做查询,

最小化重排和重绘

// 1. 重写style
ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';

// 2. add style
ele.style.cssText += 'border-;eft: 1px;'

// 3. use class
ele.className = 'active';
这里推荐使用 className 原因 className不会产生多次重排重绘而是产生一次操作
使用 absolute或者 fixed 元素就脱离了文档流
他的变化不会影响其他元素例如有动画效果的元素就最好设置为绝对定位.
使用fragment
var fragment = document.createDocumentFragment();

var li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li);

var li = document.createElement('li');
li.innerHTML = 'watermelon';
fragment.appendChild(li);

document.getElementById('fruit').appendChild(fragment);
只会进行一次重排