web前端优化--DOM性能优化

 

1、DOM访问与修改的优化：

DOM访问是有代价的，修改DOM则会引起DOM的重绘与重排，而这两种操作会消耗性能。

（1）缓存DOM：将频繁访问的对象或属性使用变量缓存起来，每次访问的时候，直接使用变量，而不是再次去访问DOM。

（2）减少重绘与重排：

    批量修改：使用文档片段documentFragment、使用类名一次性修改多个样式、或者使用CSSText属性

  如 ele.style.cssText = 'color:red;border:1px solid green';

 

     元素脱离文档流，再做修改：将元素隐藏或者克隆一份，在对其进行修改，完成修改后再显示。（对隐藏元素的操作不会引起重绘重排）

（3）选择器的使用，使用更快的querySelectorAll（'#div1 .active'）。

  注意：使用getElementsByTagName等返回HTML集合的方法时，这些返回的HTML集合会实时连接着底层文档，比如增加了一个元素，HTML结合会立即反应出来。

可以使用变量缓存，或者将HTML集合拷贝到一个数组中，访问数组的效率会比访问HTML集合要快

下面这段代码会陷入死循环：

function loopAlways(){
      var odivs = document.getElementsByTagName('div');
      for(var i=0;i<odivs.length;i++){ console.log(odivs.length);  //odivs是一个HTML集合，实时和文档连接，记录最新变化
      var d = document.createElement('div');
       document.body.appendChild(d);
     }

    }

 

改成下面这种，将集合长度缓存下来，就不会出现上面的情况

 var odivs = document.getElementsByTagName('div');
      for(var i=0,len=odivs.length;i<len;i++){ 
        var d = document.createElement('div');
        document.body.appendChild(d);
     }

（4）使用事件委托：避免对同类元素同时绑定事件，而是使用事件冒泡机制，在父元素上绑定。

 (5) innerHTML 与DOM :innerHTML稍快 （除了Webkit内核的浏览器）