DocumentFragment使用

Posted cfsxgogogo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DocumentFragment使用相关的知识,希望对你有一定的参考价值。

DocumentFragment,文档片段接口,表示一个没有父级文件的最小文档对象。它被作为一个轻量版的 Document 使用,用于存储已排好版的或尚未打理好格式的 XML 片段。最大的区别是因为 DocumentFragment 不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,且不会导致性能等问题。

最常用的方法是使用文档片段作为参数(例如,任何 Node 接口类似 Node.appendChild 和 Node.insertBefore 的方法),这种情况下被添加(append)或被插入(inserted)的是片段的所有子节点, 而非片段本身。因为所有的节点会被一次插入到文档中,而这个操作仅发生一个重渲染的操作,而不是每个节点分别被插入到文档中,因为后者会发生多次重渲染的操作。

该接口在 Web 组件(Web components)中也非常有用:<template> 元素在其 htmlTemplateElement.content 属性中包含了一个 DocumentFragment

可以使用document.createDocumentFragment 方法或者构造函数来创建一个空的 DocumentFragment

技术图片

示例:

javascript

const list = document.querySelector(‘#list‘);
const fruits = [‘Apple‘, ‘Orange‘, ‘Banana‘, ‘Melon‘];

const fragment = document.createDocumentFragment();

fruits.forEach(fruit => {
  const li = document.createElement(‘li‘);
  li.innerHTML = fruit;
  fragment.appendChild(li);
});

list.appendChild(fragment);

appendHTML:

HTMLElement.prototype.appendHTML = function(html) {
    var divTemp = document.createElement("div"), nodes = null
        // 文档片段,一次性append,提高性能
        , fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
       fragment.appendChild(nodes[i].cloneNode(true));
    }
    this.appendChild(fragment);
    // 据说下面这样子世界会更清净
    nodes = null;
    fragment = null;
};

prependHTML:

var prependHTML = function(el, html) {
    var divTemp = document.createElement("div"), nodes = null
        , fragment = document.createDocumentFragment();
 
    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
       fragment.appendChild(nodes[i].cloneNode(true));
    }
    // 插入到容器的前面 - 差异所在
    el.insertBefore(fragment, el.firstChild);
    // 内存回收?
    nodes = null;
    fragment = null;
};

  

以上是关于DocumentFragment使用的主要内容,如果未能解决你的问题,请参考以下文章

理解 DocumentFragment

使用Documentfragment优化DOM操作

DocumentFragment批量操作dom

JavaScript:将节点复制到 DocumentFragment

(89)Wangdao.com第二十二天_JavaScript DocumentFragment 节点

DOM---documentFragment