createDocumentFragment
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的更多相关文章
- createElement与createDocumentFragment的点点区别
在DOM操作里,createElement是创建一个新的节点,createDocumentFragment是创建一个文档片段. 网上可以搜到的大部分都是说使用createDocumentFragmen ...
- 【笔记】科普createDocumentFragment() 创建文档碎片节点
上一篇文章说到了动态添加文本节点的方法那如果我们要添加多个文本节点或者元素节点呢? 大家可能会想到用循环然后逐个逐个添加 但是别忘了js 还提供了创建一个文本碎片的方法 createDocumentF ...
- createDocumentFragment() 创建文档碎片节点
var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...
- document的createDocumentFragment()方法
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- ocument的createDocumentFragment()方法
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- 关于javascript document.createDocumentFragment() 替代insertCell、insertRow这种每次都使用大量的资源导致浏览器崩溃
documentFragment 是一個無父對象的document對象他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes ...
- js学习日记 （1）createDocumentFragment（） ES6 => 箭头
只能说是会用和记载,深入理解还需时间. 有关性能优化: 使用createdocumentfragment()方法可以创建某个具有节点该有的所有属性的节点. 使用情况: 提取文档中的某个小部分,修改文 ...
- 浅析document.createDocumentFragment()与js效率
对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的javascript语句操作 document.createDocumentFragment()说白了就 ...
- document.createDocumentFragment 方法
基本概念 document.createDocumentFragment 方法会创建一个 DocumentFragment 对象,该对象是一个存在于 DOM 树之外的 DOM 节点.它有一个非常有用的 ...
随机推荐
- Js验证 ：只能输入数字和小数点 验证是否是数字 js取float型小数点后两位
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'') ...
- ckeditor详解
源网页编辑软件FCKEditor在09年发布更新到3.0,并改名为CKEditor.改进后的ckeditor更加模块话,配置更加灵活,和以前的fckeditor使用方式上也有所不同.在我的mvc项目中 ...
- USB系列之六：基于DOSUSB的简单U盘驱动程序
首先要说明的是,该驱动程序仅实现了部分块设备的功能,如果作为成品软件使用,会感觉性能比较差,而且有些功能(比如FORMAT)是不能完成的,发表此驱动程序的目的旨在说明USB的编程原理以及DOS下驱动程 ...
- QWidget可以设置QStyle，它可以绘制很多东西（具体内容没研究，待续）
QStyle * QWidget::style() const See also QWidget::setStyle(), QApplication::setStyle(), and QApplica ...
- PYCURL ERROR 6 - “Couldn't resolve host 'mirrorlist.centos.org'”
在虚拟机上安装的CentOS,估计是网络配置问题,导致yum update和yum install之类的功能的用不了.出现标题上面的错误. ifdown [network_adapter] ifup ...
- Linux系统编程（8）—— 进程之进程控制函数fork
fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同,两个进程也可以做不同的事. 一个进程调用fork()函数后,系统先 ...
- C#中删除字符串最后一个字符的几种方法
转载地址 偶然看到的,记录一下,以免忘记 字符串:string s = "1,2,3,4,5," 目标:删除最后一个 "," 方法: 1.用的最多的是Su ...
- LeeCode(Database)-Employees Earning More Than Their Managers
The Employee table holds all employees including their managers. Every employee has an Id, and there ...
- Pros and Cons of T4 in Visual Studio 2008
Oleg Sych - » Pros and Cons of T4 in Visual Studio 2008 Pros and Cons of T4 in Visual Studio 2008 Po ...
- 今日成长笔记2016-11-18 - 关于java开发
好久没有写今日成长笔记了,要记得上一次写笔记还是2016-09-05,今天心血来潮,写一写最近发生在自己身上的事情,以后我要坚持每天写日记.我承认自己身上的确或多或少的存在不足,现在把它们抛出来,并记 ...