DOM優化

1、什麼是DOM

      用於操作XML和HTML文檔的應用程序

     DOM節點

     DOM樹

     DOM API

• 整個文檔是一個文檔節點
• 每個 HTML 元素是元素節點
• HTML 元素內的文本是文本節點
• 每個 HTML 屬性是屬性節點
• 註釋是註釋節點

2、DOM與Javascript

     瀏覽器會把DOM和JS獨立實現

                       -像兩個獨立的小島

     JS操作DOM

                       -從一個島到另一個島

      DOM性能

                       -島與島之間的橋，每次類似收取“過橋費”

                       -儘量減少過橋的次數

Demo1:

<div id="demo1"></div>
<script>
    window.οnlοad=function(){
        var oDemo  = document.getElementById('demo1');
        console.time('hello');
        for(var i=0; i<3000;i++){
            oDemo.innerHTML+='a';  //頻繁的與dom操作 浪費性能
        }
        console.timeEnd('hello');  //大致耗時100ms多
    }
</script>

     

Demo2:

 console.time('hello');
 var str='';
 for(var i=0; i<3000;i++){
      str+='a';  //減少與dom操作 提高性能
 }
 oDemo.innerHTML = str;
 console.timeEnd('hello')  //耗時大致不到1ms

Demo3:

<ul id="ul"></ul>
<script>
    /*
    * chrome下：dom 操作要比 innerHTML 性能要好 ,標準瀏覽器下則相反,可以選擇性使用
    * */
    window.οnlοad=function(){
        var oDemo  = document.getElementById('ul');
        var str='';
        console.time('hello');
        for(var i=0; i<3000; i ++){
            var oLi = document.createElement('li');
            oDemo.appendChild(oLi);
        }
        console.timeEnd('hello');

        console.time('hello');
        for(var i=0; i<3000; i ++){
           str+='<li></li>';
        }
        oDemo.innerHTML = str;
        console.timeEnd('hello');
    }
</script>

3、減少DOM操作

    節點克隆

            -cloneNode

    訪問元素集合

            -儘量用局部變量

    選擇API

            -利用querySelector, querySelectorAll 

Demo4:

<ul id="ul"></ul>
<script>
    /*減少DOM操作
    * cloneNode方法
    * */
    window.οnlοad=function(){
        var oDemo  = document.getElementById('ul');

        console.time('hello');
        for(var i =0; i<3000; i++){
            var oLi = document.createElement('li');
            oLi.innerHTML=i;
            oDemo.appendChild(oLi);
        }
        console.timeEnd('hello');

        console.time('hello');
        var oLi = document.createElement('li');
        oLi.innerHTML = 'li';
        for(var i=0; i<3000; i++){
            var oNewLi = oLi.cloneNode(true);  //true ： 表示連li內子元素也克隆
            oDemo.appendChild(oNewLi);
        }
        console.timeEnd('hello');
    }
</script>

Demo5:

<ul id="ul"></ul>
<script>
    /*減少DOM操作
    * 用局部變量
    * */
    window.οnlοad=function(){
        var oDemo  = document.getElementById('ul');
        var aLi = oDemo.getElementsByTagName('li');

        for(var i=0; i<3000; i++){
            var oLi = document.createElement('li');
            oDemo.appendChild(oLi);
        }
       /* console.time('hello');
        for(var i=0;i<aLi.length;i++){  //aLi.length 會不停的每次去獲取一次，浪費性能, 最好給存一個變量
            aLi[i].innerHTML ='li';
        }
        console.timeEnd('hello');
*/
        console.time('hello');
        var len = aLi.length;  //會提高一些 比如 var doc= document;
        for(var i=0; i<len; i++){
            aLi[i].innerHTML = 'li';
        }
        console.timeEnd('hello');
    }
</script>

Demo6:

//querySelctor(), querySelectorAll();
var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li');
//利用query...
var aLi = document.querySelectorAll('#ul li');// 一次dom 操作就解決了很方便，但IE8之前不支持，

4、DOM與瀏覽器

      重排：改變頁面內容

      重會：瀏覽器顯示內容

      添加順序：

                -儘量在appendChild 之前添加操作

      合併dom操作

                -利用cssText

       文檔碎片

                 - createDocumentFragment();

for(var i = 0; i<3000; i++){
     var oLi = document.createElement('li');
     oLi.innerHTML = 'li';  //儘量在appendChild之前添加
     oDemo.appendChild(oLi);
}

var oFrag = document.createDocumentFragment();
for(var i=0; i<3000; i++){
       var oLi = document.createElement('li');
       oFrag.appendChild(oLi);
}
oDemo.appendChild(oFrag);