什么是重排和重绘
浏览器下载完页面中的所有组件 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);
只会进行一次 重排
