createDocumentFragment() 方法
//createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。
//当你想提取文档的一部分,改变,增加,或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。
//你也可以使用文档的文档对象来执行这些变化,但要防止文件结构被破坏,createDocumentFragment() 方法可以更安全改变文档的结构及节点。
在更新少量节点的时候可以直接向document.body节点中添加,但是当要向document中添加大量数据是,如果直接添加这些新节点,这个过程非常缓慢,因为每添加一个节点都会调用父节点的appendChild()方法,为了解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片一次性添加到document中。
添加节点常规的写法:
<script type="text/javascript">
window.onload=function(){
for(var i = 0 ; i < 10; i ++) {
var p = document.createElement("p");
var li= document.createTextNode("li");
p.appendChild(li);
document.body.appendChild(p);
}
}
</script>
//这段代码运行是没有问题,但是他调用了十次document.body.appendChild(),每次都要产生一次页面渲染。这时碎片就十分有用了:
<script type="text/javascript">
window.onload=function(){
var body1=document.getElementById("body");
var p = document.createElement("p");
var fragMent=document.createDocumentFragment();
for(var i = 0 ; i < 10; i ++) {
var li= document.createElement("li");
fragMent.appendChild(li);
}
p.appendChild(fragMent);
//body1.appendChild(p);
document.body.appendChild(p);
}
</script>
这段代码中,每个新的<li />元素都被添加到文档碎片中,然后这个碎片被作为参数传递给appendChild()。这里对appendChild()的调用实际上并不是把文档碎片本省追加到body元素中,而是仅仅追加碎片中的子节点,然后可以看到明显的性能提升,document.body.appenChild()一次替代十次,这意味着只需要进行一个内容渲染刷新。
http://www.cnblogs.com/yunfour/archive/2011/06/21/2085911.html
createDocumentFragment() 方法的更多相关文章
- document.createDocumentFragment 方法
基本概念 document.createDocumentFragment 方法会创建一个 DocumentFragment 对象,该对象是一个存在于 DOM 树之外的 DOM 节点.它有一个非常有用的 ...
- document的createDocumentFragment()方法
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- ocument的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的"后退"按钮,使你在当前历史列表中后 ...
随机推荐
- 11.0-uC/OS-III就绪列表(优先级)
准备运行的任务被放置于就绪列表中.就绪列表包括2个部分:位映像组包含了优先级信息,一个表包含了所有指向就绪任务的指针. 1.优先级 图6-1到6-3显示了优先级的位映像组.它的宽度取决于CPU_DAT ...
- 20190422 DW/BI系统
其实很多人都不能理解操作型应用系统和分析型系统的意义,主要问题在于这两个系统所面对的用户和需求是不相同的. 建模重点“凡事应该简单,简单到不能再简单”
- jenkins和svn搭建自动代码构建发布
jenkins安装和配置 .安装jenkins .yum install java wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins. ...
- Django中CBV源码解析
使用 关于FBV和CBV的使用在之前有提到,点击穿越. 准备 首先在视图中创建一个类并继承 django.views.View 类,在类中可定义各种请求方式对应执行的函数(函数名为请求方式名称小写). ...
- [js]js杂项陆续补充中...
hasOwnProperty判断对象是否有这个属性 p = { 'name': 'maotai', 'age': 22 }; console.log(p.hasOwnProperty('names') ...
- ASP.NET CORE 2.0 Uses SignalR Technology
https://www.codeproject.com/Articles/1208322/ASP-NET-CORE-Uses-SignalR-Technology
- 《linux就该这么学》开课,linux之路新开始
今天开课第一天,虽然不会有实实在在的干货知识,只要是了解一下linux和认证.所以我也简单说一下我的linux之路 linux我是无意接触到的,因为工作,我接触的服务器较多,但是都是linux系统,记 ...
- 使用sp_addlinkedserver、sp_dropserver 、sp_addlinkedsrvlogin和sp_droplinkedsrvlogin 远程查询数据
一.sp_addlinkedserver 创建链接服务器. 链接服务器让用户可以对 OLE DB 数据源进行分布式异类查询. 在使用 sp_addlinkedserver 创建链接服务器后,可对该服 ...
- 数据库oracle 目录结构
Oracle_Home主目录位于D:\dev\oracle\product\10.2.0(oracle安装路径)下,它包含Oracle软件运行有关的子目录和网络文件以及选定的组件等:若在主机上第一次且 ...
- PHP与JavaScript下的Cookie操作
下面的例子列出几种情形交互场景,列出JS和php交互的方法.总结下,以免日后再为cookie问题困扰. setcookie.php getcookie.php 总结: php用自身函数读取php 的c ...