DOM优化

• 减少dom操作

var str = '';
     for (var i = 0; i < 5000; i++) {
         str += 'a';
     }
oDiv.innerHTML = str;

• innerHTML与DOM对比

chrome ： dom要比innerHTMl性能要好

 var oUl = document.getElementById('list');
 for (var i = 0; i < 9000; i++) {
     var oLi = document.createElement('li');
     oUl.appendChild(oLi);
 }
/**********************优化后**************************/
 for (var i = 0; i < 9000; i++) {
      str += '<li></li>';
  }
  oUl.innerHTML = str;

• 克隆节点

 for (var i = 0; i < 9000; i++) {
        var oLi = document.createElement('li');
            oLi.innerHTML = 'li';
            oUl.appendChild(oLi);
    }
/**********************优化后**************************/
    var oLi = document.createElement('li');
        oLi.innerHTML = 'li';
    for (var i = 0; i < 9000; i++) {
        var newLi = oLi.cloneNode(true);
        oUl.appendChild(newLi)
    }

• 尽量用局部变量

var len = aLi.length;
    for (var i = 0; i < len; i++){
        ......
    }

• 使用新的选择器(IE8以上)

    querySelectorAll()
    querySelector()

• 尽量在appendChild之前添加操作
• 使用cssText合并dom操作
• 缓存布局信息

 var L = oDiv.offsetLeft;
    var T = oDiv.offsetTop;
    setTimeout(function(){
        L++;
        T++;
        oDiv.style.left = L + 'px';
        oDiv.style.top = T + 'px';
    })

• 文档碎片

 var oUl = document.getElementById('ul');
    var oFrag = document.createDomentFragment();
    for(var i = 0; i < 9000; i++){
        var oLi = document.createElement('li');
        oFfrag.appendChild(oLi);
    }
    oUl.appendChild(oFrag);