資料綁定的方法:
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中文網其他相關文章！
