js學習總結----數據綁定及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('li');
            oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title
            oUl.appendChild(oLi)
        }

　　優勢：把需要動態綁定的內容一個個的追加到頁面中，對原來的元素沒有任何的影響

　　弊端：每當創建一個li，我們就添加到頁面中，引發一次DOM的迴流，最後引發迴流次數過多，影響我們的性能。

　　2、字元串拼接的方式:首先迴圈需要綁定的數據，然後把需要動態綁定的標簽以字元串的方式拼接到一起。（字元串拼接是我們以後工作中最常用的一種綁定數據的方式）

var str = "";
        for(var i = 0;i<ary.length;i++){
            var cur = ary[i];
            str+="<li>";
            str+="<span>"+(i+1)+"</span>"
            str+=cur.title;
            str+="</li>"
        }
        oUl.innerHTML += 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;

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