createDocumentFragment()

定义和用法

createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。

当你想提取文档的一部分,改变,增加,或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。

你也可以使用文档的文档对象来执行这些变化,但要防止文件结构被破坏,createDocumentFragment() 方法可以更安全改变文档的结构及节点

 

DocumentFragment节点不属于文档树,继承的parentNode属性总是null。它有一个很实用的特点,当请求把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而是它的所有子孙节点,即插入的是括号里的节点。这个特性使得DocumentFragment成了占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。 

另外,当需要添加多个dom元素时,如果先将这些元素添加到DocumentFragment中,再统一将DocumentFragment添加到页面,会减少页面渲染dom的次数,效率会明显提升

 

每一次对文档的插入都会引起重新渲染(计算元素的尺寸,显示背景,内容等),所以进行多次插入操作使得浏览器发生了很多次渲染,效率是比较低的。利用DocumentFragment文档片段存在于内存中,并不在DOM中,所以将子元素插入到文档片段中时不会引起页面回流(对元素位置和几何上的计算),因此使用DocumentFragment可以起到性能优化的作用。

创建DocumentFragment的方法有两种,document.createDocumentFragment()和new Fragment()。对于document.createDocumentFragment(),所有浏览器都支持(包括IE6),而构造函数方法就不是所有浏览器都有效了(IE没有实现该方法)。所以从兼容性上来说推荐使用document.createDocumentFragment()。

posted @ 2021-01-07 15:33  小龙猫的萤火虫  阅读(266)  评论(0编辑  收藏  举报