DOM回流和重绘,文档碎片

回流：当页面的html结构发生改变（增加，删除，位置发生改变）浏览器都需要重新计算一遍最新的DOM结构，然后重新对当前页面进行渲染。  

重绘：某一个元素的部分样式发生改变。浏览器只需要重新渲染当前元素即可。

 

在数据绑定中 动态创建DOM节点方法 和 拼接字符串方法 中使用较多是后者   

 

回流对性能的消耗比较大

 

优化方案

文档碎片

var frg = document.createDocumentFragment();

 

for(var i =0 ;i<arr.length;i++){

  var cur = arr[i];

var oLi = doucment.createElement("li");

oLi.innerHTML = ....................

frg.appendChild(oLi);

}

oUl.appendChild(frg)