数据绑定和dom回流

数据绑定方法：

1、利用动态元素节点和把它追加到页面中的方式实现数据绑定：

eg (ary为JSON数据）：

for(var i=0;i<ary.length;i++){
      var cur=ary[i];      
      var oLi=document.createElement("li");
      oLi.innerHTML="<span>"+(序号)+"</span>"+cur.tittle;
      oUl.appendChild(oLi);
 }

优势：把需要动态绑定的内容一个个的追加到页面当中，对原来的元素没有任何的影响

弊端：浏览器每当创建一个li，就添加到页面当中，引发一次DOM回流。引发回流次数过多，影响性能。

2、字符串拼接方式 (最常用绑定数据方式）：

首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接到一起，拼接完成后，最后统一添加到页面中。eg：

var str="";
 for(var i=0;i<ary.length;i++){
    var cur=ary[i];
    str+= "<li>";
    str+= "<span>"+(序号)+"</span>";
    str+= cur.tittle;
    str+= "</li>";
 }
 oUl.innerHTML+=str;

优势：
事先把内容拼接好，最后统一添加到页面中，只引发一次回流

弊端：把新拼接的字符串添加到#ul1中，原有的li中鼠标绑定（滑动效果）都消失了。即原来标签绑定的事件都消失了。

3、文档碎片：

只引发一次回流，还对原有不产生影响。

var frg=document.createDocumentFragment();  //---->创建一个文档碎片，相当于临时创建了一个容器
 for(var i=0;i<ary.length;i++){
      var cur=ary[i];
      var oLi=document.createElement("li");
      oLi.innerHTML="<span>"+(序号)+"</span>"+cur.tittle;
      frg.appendChild(oLi);
 }
 oUl.appendChild(frg);
 frg=null;  //手动释放堆内存

JS中DOM深入知识：

1、回流（重排 reflow）：
当页面中的HTML结构发生改变（增加、删除元素、位置发生改变.....），浏览器都需要重新的计算一遍最新的DOM结构，重新的对当前的页面进行渲染

2、重绘：
某一个元素的部分样式发生改变了（背景颜色等），浏览器只需要重新的渲染当前元素即可。