zoukankan      html  css  js  c++  java
  • document.createDocumentFragment()的用法

    createDocumentFragment有什么作用呢?

        调用多次document.body.append(),每次都要刷新页面一次。效率也就大打折扣了,而使用document_createDocumentFragment()创建一个文档碎片,把所有的新结点附加在其上,然后把文档碎片的内容一次性添加到document中,这也就只需要一次页面刷新就可。

    他支持以下DOM2方法: 
    a, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild. 
    也支持以下DOM2属性: 
    attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.

    下面是2段测试程序:

    var d1 = new Date();

    //创建十个段落,常规的方式

    for(var i = 0 ; i < 1000; i ++) {

        var p = document_createElement_x_x_x("p");

        var oTxt = document_createTextNode("段落" + i);

        p.a(oTxt);

        document.body.a(p);

    }

    var d2 = new Date();

    document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));

     

     

    //使用了createDocumentFragment()的程序

    var d3 = new Date();

    var pFragment = document_createDocumentFragment();

    for(var i = 0 ; i < 1000; i ++) {

        var p = document_createElement_x_x_x("p");

        var oTxt = document_createTextNode("段落" + i);

        p.a(oTxt);

        pFragment.a(p);

    }

    document.body.a(pFragment);

    var d4 = new Date();

    document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));

     

    注:document_createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。

    本文摘自《莫尘的博客》,链接地址:http://blog.sina.com.cn/s/blog_667a8c2f010113zw.html

  • 相关阅读:
    C# 获得word中某一段落所在页的页码
    写一个安全的Java单例
    递归算法
    redis连接池连接失败的问题
    A query was run and no Result Maps were found for the Mapped Statement .....................
    解决maven默认JDK1.5报错
    mybatis控制台不报错数据库却没有值返回的问题
    LNMP 环境更换Nginx 服务器为Tengine
    简易的phpexcel导出柱状图
    Laravel学习基础篇之--路由
  • 原文地址:https://www.cnblogs.com/sheshou/p/5497759.html
Copyright © 2011-2022 走看看