js-createDocumentFragment优化性能

前言

在读jquery的源码时候,遇到这个函数。想起去年去antd框架源码的时候,也碰到这个函数了。于是了解一波。
语法:

let fragment = document.createDocumentFragment();
fragment 是一个对空文档对象 DocumentFragment 对象的引用。

描述:

DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。

因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此,使用文档片段document fragments 通常会起到优化性能的作用(better performance)。

documentFragment 被所有主流浏览器支持。所以,没有理由不用。

与createElement的区别

举例

createElement

1
2
3
4
5
6
var createElementEg = document.createELement('div');
// 添加元素方法1:innerHTML
createElementEg .innerHTML = '<span>this is createELement eg</span>';
var ele = document.getElementById('test');
// 添加元素方法2:appendChild
createElementEg.appendChild(ele);

createDocumentFragment

1
2
3
4
var createDocumentFragmentEg = document.createDocumentFragment();
var ele = document.getElementById('test');
// 添加元素方法2:appendChild
createDocumentFragmentEg.appendChild(ele);

共同点

  • 添加子元素后返回值都是新添加的子元素,因此,可通过下面的方法利用innerHTML为createDocumentFragment添加子元素:

    1
    2
    3
    4
    var fragment = document.createDocumentFragment();
    var ret = fragment.appendChild(document.createElement('div'));
    ret.innerHTML = 'by innerHTML ';
    test1.appendChild(fragment);
  • 都可以通过appendChild添加子元素,且子元素必须是node类型,不能为文本。

  • 若添加的子元素是文档中存在的元素,则通过appendChild在为其添加子元素时,会从文档中删除之前存在的元素。

    区别

  • createElement创建的是元素节点,节点类型为1,createDocumentFragment创建的是文档碎片,节点类型是11
  • 通过createElement新建元素必须指定元素tagName,因为其可用innerHTML添加子元素。通过createDocumentFragment则不必。
  • 连续将通过createElement新建的元素添加到其他元素上,则只会将新建的元素添加到最后一个其他元素上,即下面的test2上,程序不会报错。

    1
    2
    3
    4
    5
    6
    7
    var createElement = document.createElement('div');
    var test1 = document.createElement('div');
    var test2 = document.createElement('div');
    document.body.appendChild(test1)
    document.body.appendChild(test2)
    test1.appendChild(createElement );
    test2.appendChild(createElement );
  • 而连续将通过createDocumentFragment新建的元素通过appendChild添加到其他元素上,则只会将新建的元素添加到第一个其他元素上,即下面的test1上,程序不会报错。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var createElement = document.createDocumentFragment();
    var createElementTest = document.createElement('div');
    createElement.appendChild(createElementTest);
    var test1 = document.createElement('div');
    var test2 = document.createElement('div');
    document.body.appendChild(test1)
    document.body.appendChild(test2)
    test1.appendChild(createElement );
    test2.appendChild(createElement );
  • 通过createElement创建的元素是直接插入到文档中,而通过createDocumentFragment创建的元素插入到文档中的是他的子元素。

  • 通过createElement创建的元素插入文档后,还可以取到创建时的返回值,即上面例子中createElement还是创建的那个div元素;而createDocumentFragment创建的元素插入到文档后,就不能访问创建时的返回值了,相当于把自己创建的文档片段直接挪到文档中了(这里是说,无法访问createElement里面的createElementTest,createElement依然可以访问)

    常用场景

    先看如下代码:
    1
    2
    3
    4
    5
    6
    var ul = document.getElementById("ul");
    for (var i = 0; i < 20; i++) {
    var li = document.createElement("li");
    li.innerHTML = "index: " + i;
    ul.appendChild(li);
    }

由于每一次对文档的插入都会引起重新渲染(计算元素的尺寸,显示背景,内容等),所以进行多次插入操作使得浏览器发生了很多次渲染,效率是比较低的。这是我们提倡通过减少页面的渲染来提高DOM操作的效率的原因。一个优化的方法是将要创建的元素写到一个字符串上,然后一次性写到innerHTML上,这种利用浏览器对innerHTML的解析确实是相比上面的多次插入快了很多。但是构造字符串灵活性上面比较差,很难符合创建各种各样的DOM元素的需求。利用DocumentFragment,可以弥补这两个方法的不足。

因为文档片段存在于内存中,并不在DOM中,所以将子元素插入到文档片段中时不会引起页面回流(对元素位置和几何上的计算),因此使用DocumentFragment可以起到性能优化的作用。例如上面的代码就可以改成下面的片段。

1
2
3
4
5
6
7
8
var ul = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i = 0; i < 20; i++) {
var li = document.createElement("li");
li.innerHTML = "index: " + i;
fragment.appendChild(li);
}
ul.appendChild(fragment);

由于DocumentFragment的优势,很多javascript库都是用它来创建HTML的,包括jquery。

参考

https://blog.csdn.net/zhuchuji/article/details/50544008