Dom优化

1、innerHTML

//方案一
for (var i=0;i<5000;i++) {
    oUl.innerHTML += '<li></li>';
}
//方案二
var str = '';
for (var i=0;i<5000;i++) {
    str += '<li></li>';
}

oUl.innerHTML = str;


//显然方案二比方案一更好，JS与DOM交互只需要一次，性能更好

2、Dom的操作与innerHTML比较，哪个性能好？

　　chrome：Dom(性能更好)    innerHTML

　　FF: Dom   innerHTML(性能更好)

3、节点克隆cloneNode性能更好,cloneNode(true)表示包括子节点一起克隆

//普通的DOM方法
        console.time('Dom');
        for (var i=0;i<5000;i++) {
            var oLi = document.createElement('li');
            oLi.innerHTML = 'li';
            oUl.appendChild(oLi);
        }
        console.timeEnd('Dom');

//cloneNode的方法
        console.time('cloneNode');
        var oLi = document.createElement('li');
        oLi.innerHTML = 'li';
        for (var i=0;i<5000;i++) {
            var newLi = oLi.cloneNode(true);  //加上true，表示子节点都克隆
            oUl.appendChild(newLi);
        }
        console.timeEnd('cloneNode');

 4、访问元素集合的时候，尽量用局部变量

        var aLi = document.getElementsByTagName('li');
        for (var i=0;i<aLi.length;i++) {

        }

        //用局部变量，将len = aLi.length 
        var aLi = document.getElementsByTagName('li');for (var i=0,len = aLi.length;i<len;i++) {

        }

        //
        var oUl = document.getElementById();
        var oP = document.getElementById();
        var oDiv = document.getElementById();

        //用局部变量，更改如下：
        var doc = document;
        var oUl = doc.getElementById();
        var oP = doc.getElementById();
        var oDiv = doc.getElementById();

 5、元素节点

　　比如：

　　　　childNode: 可以获取元素节点+文本节点  

　　　　children:获取元素点(性能更好)

　　　　firstNode

　　　　firstElementNode(性能更好)

6、选择器API

　　利用querySelector、querySelectorAll，支持IE8+

        var oUl = document.getElementById('ul1');
        var aLi = oUl.getElementsByTagName('li');
        //可以用以下的方法来代替，提高性能，只支持IE8+
        var aLi = document.querySelectorAll('#ul li');

----------------------------------------------------------------------------------------------------------------

DOM与浏览器

重排(width,height),重绘(background)会影响性能

1、添加顺序（尽量在appendchild前添加操作）

        var oUl = document.getElementById('ul1');
        for (var i=0;i<5000;i++) {
            var oLi = document.createElement('li');
            oUl.appendChild(oLi);
            oLi.innerHTML = 'li';
        }


/*
   修改顺序如下,从页可以提高性能：
        var oLi = document.createElement('li');
        oLi.innerHTML = 'li';
        oUl.appendChild(oLi);
         
*/

2、合并Dom操作，使用cssText

        var oUl = document.getElementById('ul1');
        for (var i=0;i<5000;i++) {
            var oLi = document.createElement('li');
            oLi.style.width = '100px';
            oLi.style.height = '100px';
            oLi.style.background = 'red';
            oLi.innerHTML = 'li';
        }


/*
     修改如下：
          oLi.style.cssText = '100px;heigth:100px;background:red';
*/

3、缓存布局信息

        var oDiv = document.getElementById('div1');
        setInterval(function(){
            oDiv.style.left = oDiv.offsetLeft + 1 + 'px';
            oDiv.style.height = oDiv.offsetTop + 1 + 'px';
        },30)


//修改如下，先把offsetLeft/offsetTop缓存起来

        var oDiv = document.getElementById('div1');
        var L = oDiv.offsetLeft;
        var T = oDiv.offsetTop;
        setInterval(function(){
            L++;
            T++;
            oDiv.style.left = L + 'px';
            oDiv.style.height = T + 'px';
        },30)

4、使用文档碎片（createDocumentFragment）

//文档碎片就是类似一个袋子，先把东西存放在一个袋子里，最后再追加进去

        var oUl = document.getElementById('ul1');

        for (var i=0;i<5000;i++) {
            var oLi = document.createElement('li');
            oUl.appendChild(oLi);
        }


//修改如下：
        var oUl = document.getElementById('ul1');
        var oFrag = document.createDocumentFragment();

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

        oUl.appendChild(oFrag);

 5、事件委托