document.createDocumentFragment

document.createElement和document.createDocumentFagment在功能实现上没有什么差别

都是用来新创建一个DOM,

但是区别在于,前者每次都新建一个,每次页面刷新一次

而后者,是先创建一个文档碎片,将所有后面新创建的节点创建完毕后一次加载到页面中,

这样可以减少页面刷新次数,提高渲染效率。

时间: 2024-10-12 22:53:11

document.createDocumentFragment的相关文章

document.createDocumentFragment()的作用是什么

document.createDocumentFragment()的作用是什么:createDocumentFragment()函数可能用的并不是太多,之所以这样是因为不使用此方法完全可以实现所有的功能,但是如果能够妥当的使用此函数可以有效的提高执行效果,下面就通过实例简单介绍一下次函数用法.先看一段代码实例: var myArray=new Array("一","二","三","四","五","

浅析document.createDocumentFragment()与js效率

对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的javascript语句操作 document.createDocumentFragment()说白了就是为了节约使用DOM.每次JavaScript对DOM的操作都会 改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间.为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次 性添加到document中. 这是我写的一个简单的测试页面: <!DOCTYPE htm

document.createDocumentFragment()的用法

createDocumentFragment有什么作用呢? 调用多次document.body.append(),每次都要刷新页面一次.效率也就大打折扣了,而使用document_createDocumentFragment()创建一个文档碎片,把所有的新结点附加在其上,然后把文档碎片的内容一次性添加到document中,这也就只需要一次页面刷新就可. 他支持以下DOM2方法: a, cloneNode, hasAttributes, hasChildNodes, insertBefore, n

document的createDocumentFragment()方法

在更新少量节点的时候可以直接向document.body节点中添加,但是当要向document中添加大量数据是,如果直接添加这些新节点,这个过程非常缓慢,因为每添加一个节点都会调用父节点的appendChild()方法,为了解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片一次性添加到document中. 假如想创建十个段落,使用常规的方式可能会写出这样的代码: 1 2 3 4 5 6 for(var i = 0 ; i < 10; i ++) {     var p =

Document Object Model

1. DOM => Document Object Model(文档对象模型); DOM是一个树形结构;由Node\Element(节点\元素)构成;2.Node\Element; element.id\element.className\element.value\.... element.tagName\element.nodeName => 元素的标签名; element.nodeType; => 元素的类型; Element(1); => 元素; Attbribute(2)

createDocumentFragment() 方法

//createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法. //当你想提取文档的一部分,改变,增加,或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法. //你也可以使用文档的文档对象来执行这些变化,但要防止文件结构被破坏,createDocumentFragment() 方法可以更安全改变文档的结构及节点. 在更新少量节点的时候可以直接向document.body节点中添加,但是当要向document中

js学习日记 (1)createDocumentFragment() ES6 =&gt; 箭头

只能说是会用和记载,深入理解还需时间. 有关性能优化: 使用createdocumentfragment()方法可以创建某个具有节点该有的所有属性的节点. 使用情况:  提取文档中的某个小部分,修改文档中的小节点,添加部分内容在节点尾部或者某个标志处. 虽然可以用文档的文档对象来在这些情况中使用,但如果防止文件结构被破坏,createDocumentFragment() 方法可以更安全改变文档的结构及节点. 一般这样用: let newLists=document.createDocumentF

HTML DOM Document 对象

Document 对象属性和方法 HTML文档中可以使用以上属性和方法: 属性 / 方法 描述 document.activeElement 返回当前获取焦点元素 document.addEventListener() 向文档添加句柄 document.adoptNode(node) 从另外一个文档返回 adapded 节点到当前文档. document.anchors 返回对文档中所有 Anchor 对象的引用. document.applets 返回对文档中所有 Applet 对象的引用.

document文档碎片

var arrText = ["1","2","3","4","5","6","7","8","9","10"]; var oFragment = document.createDocumentFragment(); for(var i=0;i<arrText.length;i++) { var oP