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);