createDocumentFragment
为什么80%的码农都做不了架构师?>>>
DocumentFragment
是“轻量级”或“最小”Document
对象。希望能够提取文档树的一部分或创建文档的新片段是很常见的。设想实现像剪切这样的用户命令或通过来回移动片段重新安排文档。需要有一个可以保存此类片段的对象,很自然出于此目要使用一个 Node。当Document
对象真正可以完成此职责时,Document
对象可能为重量级对象,具体取决于基础实现。此操作真正需要的是非常轻量级的对象。DocumentFragment
就是这样的对象。
此外,多种操作(如作为另一个 Node
的子节点插入节点)可能将 DocumentFragment
对象作为参数;这样会导致将 DocumentFragment
的所有子节点移动到此节点的子列表。
调用多次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中。
转载于:https://my.oschina.net/wzzz/blog/165323
createDocumentFragment相关推荐
- createDocumentFragment 详解
DocumentFragment 是一個無父對象的document對象. 他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNod ...
- document.createDocumentFragment 以及创建节点速度比较
document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象. Docum ...
- JS性能优化之文档碎片-document.createDocumentFragment
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新 ...
- [JavaScript]使用document.createDocumentFragment优化性能
如果对客户端动态交互要求比较高,在DOM里需要频繁动态增加元素,那么可能会遇到性能问题,那么就有可能用到DocumentFragment了,具体看看下面的例子,性能差别还是挺大的. <!DOCT ...
- html无规律卡片布局,如何实现同等间隙的卡片布局
在列表展示中,经常会使用卡片的内容展示形式,为了美观,常常要求各卡片间的间隙是一致的. 卡片内容不一样可能高度不等,但一般来说为了整体的一致性,会限制每个卡片的宽高都相等. 本文就基于宽高一致的多个卡 ...
- jquery 1.7.2源码解析(二)构造jquery对象
构造jquery对象 jQuery对象是一个类数组对象. 一)构造函数jQuery() 构造函数的7种用法: 1.jQuery(selector [, context ]) 传入字符串参数:检查该字符 ...
- 动态引入js只能生效一次_干货丨动态插入的script脚本执行时间
在一些场景我们会动态插入script标签加载js. 譬如某个js文件不是很重要,并不是整个页面需要的脚本,可能只是某个功能需要的,这个功能可能是用户点击了某个按钮才触发,入口比较深.且和你页面本身的结 ...
- javascript知识点
一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5.未来三到五年的规划是怎样的? ...
- javascript实例
数组排序 ①冒泡排序 思路: 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素 ...
最新文章
- pandas将dataframe原有的数据列名称转化为整数数值列名称(convert dataframe column labelsl into integers)
- 学习OpenCV——粒子滤波(网上两篇文章总结)
- 七丶青龙nvjdc部署教程+短信验证登录对接傻妞
- JavaScript变量——栈内存or堆内存
- pm_bout_1/2_on_subway
- java怎么做系统_Java系统监控怎么做
- 分布式 虚拟时间和虚拟同步_分布式虚拟跟踪
- mac docker mysql_Mac操作系统上使用Docker创建MySQL主从数据库
- 计算机科学家 收入,你离年薪100万的数据科学家还差10个“码农”
- php查看加载的配置文件路径,thinkphp5.0 配置文件加载路径说明
- WPF-TreeView遍历硬盘所有目录
- 报表工具Style Report报表打印功能
- 如何识别媒体偏见_面部识别软件:宝贵资产,还是社会偏见的体现?
- C# IntPtr转struct
- 交换机Trunk详解
- cookie httponly ajax,为什么jquery的.ajax()方法没有发送我的会话cookie?
- RandomAccessFile 随机读写文件
- GraphPad Prism使用
- OB0202 obsidian kanban插件使用
- excel里有文字的数字怎么从小到大排序,而不是首数字排序