数据绑定的方法:
1、利用动态创建元素节点和把它追加到页面中的方式实现数据绑定（将动态添加的li添加到ul中）
var oUl = document.getElementById('ul')for(var i = 0;i<ary.length;i++){var cur = ary[i];var oLi = document.createElement('li');
oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
oUl.appendChild(oLi)
}优势：把需要动态绑定的内容一个个的追加到页面中，对原来的元素没有任何的影响
弊端：每当创建一个li，我们就添加到页面中，引发一次DOM的回流，最后引发回流次数过多，影响我们的性能。
2、字符串拼接的方式:首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接到一起。（字符串拼接是我们以后工作中最常用的一种绑定数据的方式）
str = ""( i = 0;i<ary.length;i++ cur =+="<li>"+="<span>"+(i+1)+"</span>"+=+="</li>"+= str;//oUl.innerHTML(把之前的li以字符串的方式获取到)+str;拼接完成的整体还是字符串 最后再把字符串统一的添加到页面中，浏览器还需要把字符串渲染成为对应的标签
弊端:我们把新拼接的字符串添加到ul中，原有的li绑定的事件都消失了
优势:事先把内容拼接好，最后统一添加到页面中，只引发一次回流
JS中DOM深入知识：应该尽量减少回流
回流(重排 reflow)：当页面中的HTML结构发生改变（增加、删除元素、位置发生改变），浏览器都需要重新的计算一遍最新的DOM结构，重新的对当前的页面进行渲染
重绘：某一个元素的部分样式发生改变了（背景颜色），浏览器只需要 重新的渲染当前的元素即可
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>"+(i+1)+"</span>"+cur.title
frg.appendChild(oLi)
}
oUl.appendChild(frg);
frg = null;只有一次回流，并且对原来的没有影响
以上是数据绑定及dom回流实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！
