資料綁定及dom回流實例詳解

資料綁定的方法:

　　1、利用動態建立元素節點和將它追加到頁面中的方式實作資料綁定（將動態新增的li加入ul）　

var oUl = document.getElementById('ul')for(var i = 0;i<ary.length;i++){var cur = ary[i];var oLi = document.createElement(&#39;li&#39;);
            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(&#39;li&#39;);
            oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
            frg.appendChild(oLi)
        }
        oUl.appendChild(frg);
        frg = null;

#　　只有一次回流，並且對原來的沒有影響

#

以上是資料綁定及dom回流實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！