ocument的createDocumentFragment()方法
在《javascript高级程序设计》一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法:
· crateAttribute(name): 用指定名称name创建特性节点
· createComment(text): 创建带文本text的注释节点
· createDocumentFragment(): 创建文档碎片节点
· createElement(tagname): 创建标签名为tagname的节点
· createTextNode(text): 创建包含文本text的文本节点
其中最感兴趣且以前没有接触过的一个方法是createComment(text)方法,书中介绍说:在更新少量节点的时候可以直接向 document.body节点中添加,但是当要向document中添加大量数据是,如果直接添加这些新节点,这个过程非常缓慢,因为每添加一个节点都 会调用父节点的appendChild()方法,为了解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片一次性添加到 document中。
假如想创建十个段落,使用常规的方式可能会写出这样的代码:
1
2
3
4
5
6
|
for ( var i = 0 ; i < 10; i ++) { var p = document.createElement( "p" ); var oTxt = document.createTextNode( "段落" + i); p.appendChild(oTxt); document.body.appendChild(p); } |
当然,这段代码运行是没有问题,但是他调用了十次document.body.appendChild(),每次都要产生一次页面渲染。这时碎片就十分有用了:
1
|
var oFragment = document.createDocumentFragment(); |
1
2
3
4
5
|
for ( var i = 0 ; i < 10; i ++) { var p = document.createElement( "p" ); var oTxt = document.createTextNode( "段落" + i); p.appendChild(oTxt); oFragment.appendChild(p);<br>} |
1
|
document.body.appendChild(oFragment); |
在这段代码中,每个新的<p />元素都被添加到文档碎片中,然后这个碎片被作为参数传递给appendChild()。这里对appendChild()的调用实际上并不是把 文档碎片本省追加到body元素中,而是仅仅追加碎片中的子节点,然后可以看到明显的性能提升,document.body.appenChild()一 次替代十次,这意味着只需要进行一个内容渲染刷新。
转载 http://www.cnblogs.com/yunfour/archive/2011/06/21/2085911.html
ocument的createDocumentFragment()方法的更多相关文章
- document.createDocumentFragment 方法
基本概念 document.createDocumentFragment 方法会创建一个 DocumentFragment 对象,该对象是一个存在于 DOM 树之外的 DOM 节点.它有一个非常有用的 ...
- createDocumentFragment() 方法
//createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法. //当你想提取文档的一部分,改变,增加,或删除某些内容及插入到文档末尾可以使用create ...
- document的createDocumentFragment()方法
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- Javascript -- document的createDocumentFragment()方法
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- js学习日记 (1)createDocumentFragment() ES6 => 箭头
只能说是会用和记载,深入理解还需时间. 有关性能优化: 使用createdocumentfragment()方法可以创建某个具有节点该有的所有属性的节点. 使用情况: 提取文档中的某个小部分,修改文 ...
- js代码性能优化的几个方法
相信写代码对于大部分人都不难,但想写出高性能的代码就需要一定的技术积累啦,下面是一些优化JavaScript代码性能的常见方法. 一.注意作用域 1.避免全局查找 使用全局变量和函数肯定要比局部的开销 ...
- document.createDocumentFragment 以及创建节点速度比较
document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象. Docum ...
- createDocumentFragment()用法总结
1.createDocumentFragment()方法,是用来创建一个虚拟的节点对象,或者说,是用来创建文档碎片节点.它可以包含各种类型的节点,在创建之初是空的. 2.DocumentFragmen ...
- WebBrowser常用属性方法介绍
WebBrowser 常用属性方法 ■■方法 ============================== ▲GoBack 相当于IE的"后退"按钮,使你在当前历史列表中后 ...
随机推荐
- CUBRID学习笔记 7 ms常见错误
基本不是权限问题,就是dll问题. 重新下载或应用dll注意版本. 权限的问题,先本机测试. 看看在web管理有无问题. 剩下的基本就简单了 欢迎转载 ,转载时请保留作者信息.本文版权归本人所有, ...
- Jenkins插件及 测试源码
Jenkins 插件: https://updates.jenkins-ci.org/download/plugins/ 小米的一份android源码,测试工具,用于抢红包: https://gith ...
- SecureCRT显示中文和语法高亮
因为默认情况下,SecureCRT不能显示语法高亮特性,整个界面颜色单一,看起来不爽,也没有效率,所有通过设置一下语法高亮还是很有必要的, 默认字体也看着不是很清晰,还是更改为我比较喜欢的Courie ...
- HDU-4521 小明系列问题——小明序列 间隔限制最长上升子序列
题意:给定一个长度为N的序列,现在要求给出一个最长的序列满足序列中的元素严格上升并且相邻两个数字的下标间隔要严格大于d. 分析: 1.线段树 由于给定的元素的取值范围为0-10^5,因此维护一棵线段树 ...
- Xpert 基础
----------------------- 01 ------------------------------- declare cursor emp_cur is select empname ...
- MyEclipse8.5启动无法选择工作空间的问题
方法一:打开Window---Preferences---General---Startup and Shutdown,勾选Prompt for workspace on startup 选项,再次登 ...
- 【Linux系统】防暴力破解
在日志文件/var/log/secure 中可以看到涉及到安全方面的日志,可以查看是否有人尝试暴力破解及是否成功,对于肉鸡行为有一定帮助 思路基本上都是加强密码的复杂度,增加iptables配置黑名单 ...
- java集合和scala集合互转
使用 scala.collection.JavaConverters 与Java集合交互.它有一系列的隐式转换,添加了asJava和asScala的转换方法.使用它们这些方法确保转换是显式的,有助于阅 ...
- 20160816_Redis一些资料
1.官网 http://redis.io/ 2.一个教程 http://www.yiibai.com/redis/redis_quick_guide.html 3.快速开始指南(Quick Start ...
- vs2010工程迁移问题,x64到Win32
ALL_BUILD:vcxproj:找不到项目文件“ALL_BUILD”中引用的平台“x64”.请确保已将该平台安装在“%VCTargetsPath%\Platforms\x64”下.无法加载项目. ...