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

Posted 2020-09-06 芬芬是个乖宝宝

 

小结

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