前端性能优化－－

小结

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操作

1缓存DOM对象

2在内存中操作DOM元素

3一次性DOM节点生成

4通过类添加样式

最新文章

热门文章