zoukankan      html  css  js  c++  java
  • 前端性能优化---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
  • 相关阅读:
    centos6.5 源码安装 mysql
    centOS系统安装MySQL教程
    CENTOS下搭建SVN服务器
    定位记录,删除后定位到下一条记录上
    Delphi Edit输入+号(加号),不允许显示输入符号,清空Edit,显示事件
    [经常用此练习即可] SQL2000行转列三种方式解答,侧重于第二种方式,第一种需用临时表,第三种方式适合固定方式写入都正确
    Delphi与SQL模糊like通配符查询(转载)
    四舍五入可以用这种形式,保留2位小数!
    APP开发工具对比!!
    FastReport 使用技巧篇
  • 原文地址:https://www.cnblogs.com/chengdabelief/p/6636123.html
Copyright © 2011-2022 走看看