http://www.cnblogs.com/myjavascript/p/3708920.html

对于循环批量操作页面的DOM有很大帮助！利用文档碎片处理，然后一次性append，并且使用原生的javascript语句操作

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

这是我写的一个简单的测试页面：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

<html xmlns="

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>document.createDocumentFragment()测试页面</title>

</head>

<body>

<script type="text/javascript">

       var d1 = new Date();

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

       {

             var op=document.createElement("P");

             var oText=document.createTextNode("test1");

              op.appendChild(oText);

              document.body.appendChild(op);

       }

      var d2 = new Date();

       document.write("方法一用时：" + (d2.getTime() - d1.getTime()) + "<br/>");

      //---+-----

       var d3 = new Date();

      var oFrag=document.createDocumentFragment();

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

       {

             var op=document.createElement("P");

             var oText=document.createTextNode("test2");

              op.appendChild(oText);

              oFrag.appendChild(op);

       }

       document.body.appendChild(oFrag);

      //这段代码中

       var d4 = new Date();

       document.write("方法二用时：" + (d4.getTime() - d3.getTime()) + "<br/>");

</script>

</body>

</html>

一 旦把节点添加到document.body(或其后的节点)中，页面就会立即反映出这个变化。对于第一小段程序，运行是没有任何问题的，但问题是它调用了 十次document.body.appendChild(),每次要产生一次页面刷新，这样会产生很多页面碎片。而第二小段代 码，document.body.appendChild()仅调用了一次，这意味着只需要进行一次页面的刷新，需要的时间显然会比前面的要少。

我用了三种浏览器测试上面的测试代码，大致得出的结果为：

IE7：

方法一用时：140

方法二用时：125

Firefox：

方法一用时：66

方法二用时：43

Chrome：

方法一用时：35

方法二用时：25

得出的结果还是和理论上的一致了。

一点一滴，滴水穿石，坚持。。

createDocumentFragment的更多相关文章

  1. createElement与createDocumentFragment的点点区别

    在DOM操作里,createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段. 网上可以搜到的大部分都是说使用createDocumentFragmen ...

  2. 【笔记】科普createDocumentFragment() 创建文档碎片节点

    上一篇文章说到了动态添加文本节点的方法那如果我们要添加多个文本节点或者元素节点呢? 大家可能会想到用循环然后逐个逐个添加 但是别忘了js 还提供了创建一个文本碎片的方法 createDocumentF ...

  3. createDocumentFragment()　创建文档碎片节点

    var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...

  4. document的createDocumentFragment()方法

    在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...

  5. ocument的createDocumentFragment()方法

    在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...

  6. 关于javascript document.createDocumentFragment() 替代insertCell、insertRow这种每次都使用大量的资源导致浏览器崩溃

    documentFragment 是一個無父對象的document對象他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes ...

  7. js学习日记 （1）createDocumentFragment（） ES6 => 箭头

    只能说是会用和记载,深入理解还需时间. 有关性能优化: 使用createdocumentfragment()方法可以创建某个具有节点该有的所有属性的节点. 使用情况:  提取文档中的某个小部分,修改文 ...

  8. 浅析document.createDocumentFragment()与js效率

    对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的javascript语句操作 document.createDocumentFragment()说白了就 ...

  9. document.createDocumentFragment 方法

    基本概念 document.createDocumentFragment 方法会创建一个 DocumentFragment 对象,该对象是一个存在于 DOM 树之外的 DOM 节点.它有一个非常有用的 ...

随机推荐

  1. Android中动态更新TextView上的文字

    示例代码: 1.新线程,定时更新文字 class testThread extends Thread{ public void run() { Message message = new Messag ...

  2. arcgis api for silverlight使用google map等多个在线地图

    原文 http://blog.csdn.net/leesmn/article/details/6820245 无可否认,google map实在是很漂亮.可惜对于使用arcgis api for si ...

  3. Apache、php、mysql单独安装配置

    php, 安装版的,http://www.php.net/manual/zh/install.php.也有不安装版直接配置的. 在Windows 7下如何进行PHP配置环境. PHP环境在Window ...

  4. iframe父子页面互调方法和属性

    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了.比如调用a()函数,就写成: window.parent.a(); 子页面取父页面中的标签 ...

  5. Roy the Robber

    Problem Description The aspiring Roy the Robber has seen a lot of American movies, and knows that th ...

  6. Contains Duplicate 解答

    Question Given an array of integers, find if the array contains any duplicates. Your function should ...

  7. HDU5437 Alisha’s Party (优先队列 + 模拟)

    Alisha’s Party Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  8. 代码中实际运用memcached——.NET

    本文取自:http://blog.csdn.net/dyllove98/article/details/9115947 memcached安装:============================ ...

  9. ubuntu 下安装伪分布式 hadoop

    安装准备: (1)hadoop安装包:hadoop-1.2.1.tar.gz (2)jdk安装包:jdk-7u60-linux-i586.gz (3)要是须要eclipse开发的话 还须要eclips ...

  10. error: ‘for’ loop initial declarations are only allowed in

    使用gcc,出现如下错误: thread_join.c:7:5: error: 'for' loop initial declarations are only allowed in C99 mode ...