首页 > 代码库 > 前端性能优化---DOM操作

前端性能优化---DOM操作

 

小结

1缓存DOM对象

  场景:缓存DOM对象的方式也经常被用在元素的查找中,查找元素应该是DOM操作中最频繁的操作了,其效率优化也是大头。在一般情况下,我们会根据需要,将一些频繁被查找的元素缓存起来,在查找它或查找它的子孙元素时,以它为起点进行查找,就能提高查找效率了。

  var ulNode = document.getElementById("container");

 

2在内存中操作DOM元素

  由于DOM操作会导致浏览器的回流,回流需要花费大量的时间进行样式计算和节点重绘与渲染,所以应当尽量减少回流次数。一种可靠的方法就是加入元素时不要修改页面上已经存在的元素,而是在内存中的节点进行大量的操作,最后再一并将修改运用到页面上。DOM操作本身提供一个创建内存节点片段的功能:

比如在ul中添加很多 li :

 var fragment=document.createDocumentFragment()

 fragment.appendChild(liNode);

 
  ulNode.appendChild(fragment);

 

3一次性DOM节点生成

var fragmentHtml="";
fragmentHtml += "<li>" + data[i] + "</li>";
....
ulNode.innerHTML = fragmentHtml;

通过innerHTML属性来一次性生成节点,具体的思路就是使用字符串拼接的方式,先生成相应的HTML字符串,最后一次性写入到ul的innerHTML中

 

4通过类添加样式

有时候我们需要通过JavaScript给元素增加样式,比如如下代码:

element.style.fontWeight = ‘bold‘;
element.style.backgroundImage = ‘url(back.gif)‘;
element.style.backgroundColor = ‘white‘;
element.style.color = ‘white‘;
//...

这样效率很低,每次修改style属性后都会触发元素的重绘,如果修改了的属性涉及大小和位置,将会导致回流。所以我们应当尽量避免多次为一个元素设置style属性,应当通过给其添加新的CSS类,来修改其CSS

.element {
    background-image: url(back.gif);
    background-color: #fff;
    color: #fff;
    font-weight: ‘bold‘;
    /*...*/
}
element.className += " element";






5
通过事件代理批量操作事件

<ul id="container">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     ...
     ...
</ul>

 动态添加li,点击li弹出其innerText

var ulNode = document.getElementById("container");
var fragmentHtml = "", i, m;
for (i = 0, m = data.length; i < m; i++) {
    fragmentHtml += "<li>" + data[i] + "</li>";
}
ulNode.innerHTML = fragmentHtml;

var handler = function(e){
             //do something          
};
ulNode.addEventListener("click", function(e){
    if(e.target.tagName.toLowerCase() === ‘li‘) {
           handler.call(e.target, e);
    }
}, false);

 


参考:https://segmentfault.com/a/1190000000490322

前端性能优化---DOM操作