在理解repaint与reflow之前，希望你可以理解一下关于url请求后一系列步骤。这样你会有一个系统的认识。可以看这个👇
http://www.jianshu.com/p/c1075ddbabca
什么是reflow与repaint？
如图：当浏览器接收到网页文件，会解析成2部分内容：dom树与样式结构。然后生成render tree，最后渲染在页面上。
当Dom元素的样式，例如color的值变化，页面的会重新绘制。则触发repaint。
当页面属性例如width发生变化，页面会触发reflow。
关于性能优化：
reflow是不可避免的，那就将对页面性能的影响减少到最小。
建议：
1、页面动画的布局，使用fixed与absolute，这样不影响其他元素的布局。
2、样式尽量写在class中，如果写在style，每设置一次将reflow。
3、页面动画，会设置移动间隔时间与平移px，每个时间单位内移动1px，看上去效果肯定顺滑。但是reflow会过于频繁。建议时间单位内移动3px，最佳。
4、还有少用table布局，因为该布局内，某一个元素发生变更，整个table布局都会reflow。
5、减少对dom的操作
说到性能优化，就必须理解DOM的属性与方法
Dom的属性：
innerHtml：节点内容，可以获取或者设置
parentNode：当前节点的父节点
childNodes：获取当前节点的儿子节点
attributes：节点的属性节点
style：dgID('id').style.color='red'
Dom的方法：
获取节点：
getElementById('idName')根据id获取节点的dom对象
getElementByTagName('name')获取元素名
getElementByClassName('className')根据class name获取元素
新增节点：
document.createElement()创建节点对象，参数是字符串也可以是html标签
var node=document.createElement('div')
createTextNode创建文本节点，配合createElement使用
var h=document.createElement("H1")
var t=document.createTextNode("Hello World");
h.appendChild(t);
appendChild(element):把新的节点添加到制定节点下，参数是一个节点对象
修改节点
insertBefore() 在现有的子节点前插入一个新的子节点
var node = document.createElement(“div”);
var _p = document.createElement(“p”);
var _span = document.createElement(“span”);
//创建三个元素
node.appendChild(_p);//在node中添加_p
node.insertBefore(_span, _p);//在node中的p元素之前放入span，第二个参数是可选的，如果不写，就默认放在末尾，类似于appendChild
replaceChild()节点交换
node.replaceChild(_p,_span);
setAttribute()设置属性
删除节点
removeChild(element)
node.removeChild(_p);
优化案例：
1、工作中肯定有遍历一个元素放入页面。那么我们就可以把元素一次性放入一个box，然后将这个box放入dom树中。
// 不好的做法
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
list.appendChild(item);
}
// 更好的做法
// 使用容器存放临时变更， 最后再一次性更新DOM
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
fragment.appendChild(item);
}
list.appendChild(fragment);
/*没有直接对dom进行遍历操作*/
2、大范围的操作先把容器隐藏，在显示。display=none
原理大概是：隐藏元素并不会触发reflow，那么就先等浏览器加载好数据，再将其显示。就不会频繁重排页面。
3、样式操作不要直接修改属性，选择替换class
原理：逐一修改要访问很多次，而替换，相当于批量操作。访问一次dom。
4、用变量保存dom，而不是多次获取。这样减少了对dom的操作
//bad
function addAnchor(parentElement, anchorText, anchorClass) {
var element = document.createElement('a');
parentElement.appendChild(element);
element.innerHTML = anchorText;
element.className = anchorClass;
}
//good
var element = document.createElement('a');
element.innerHTML = anchorText;
element.className = anchorClass;
parentElement.appendChild(element);
/*创建元素以后，就对他进行一系列的封装，然后在放到某个元素中去*/
