zoukankan      html  css  js  c++  java
  • DocumentFragment --更快捷操作DOM的途径

      使用DocumentFragment将一批子元素添加到任何类似node的父节点上,对这批子元素的操作不需要一个真正的根节点。可以不依赖可见的DOM来构造一个DOM结构,而效率高是它真正的优势,试验表明,它比直接操作DOM快70%。下面我们就来看看DocumentFragments是如何使用的。

    DocumentFragment例子

      我们要使用UL元素,然后往里面插入LI元素:

    <ul id="list"></ul>

      DOM插入和修改是一个很费力耗时的工作,所以,这样的交互越少越好。这就是DocumentFragment发挥功用的地方了。第一步我们先创建一个DocumentFragment:

    // Create the fragment
    var frag = document.createDocumentFragment();

      DocumentFragment实际上像一个伪DOM节点,在这个例子里你可以把它当成虚拟的UL元素。现在,我们开始往里面加入元素:

    // Create numerous list items, add to fragment
    for(var x = 0; x < 10; x++) {
        var li = document.createElement("li");
        li.innerHTML = "List item " + x;
        frag.appendChild(li);
    }

      往DocumentFragment里添加元素就跟你操作普通的DOM节点一样。一旦页面DOM加载完成,你可以访问了,你就可以把DocumentFragement挂到它的父节点上:

    // Mass-add the fragment nodes to the list
    listNode.appendChild(frag);

      使用DocumentFragement要比直接对DOM节点操作要快的多,而且可以利用新DOM节点来操作DocumentFragement,这样比操作整个页面DOM要更容易。所以,当需要进行大量DOM操作时,尽量使用DocumentFragement,它会让你的应用变的更快!

     

      转自:http://www.webhek.com/post/javascript-documentfragment.html

  • 相关阅读:
    高性能css动画
    关于thinkphp验证码的那些事
    DOM对象的属性
    关于data属性的一些常见的处理方式
    webstorm快捷键整理
    javascript模块化编程
    2016年5月30日上午(传智Bootstrap笔记六(图片样式))
    Bootstrap列排序
    2016年5月29日晚上(传智Bootstrap笔记五(表单2))
    2016年5月29日晚上(传智Bootstrap笔记四(栅格系统 ))
  • 原文地址:https://www.cnblogs.com/lulin1/p/7382159.html
Copyright © 2011-2022 走看看