javascript - 使用 .appendChild(DocumentFragment) 与 .append(...[DomElement,...])

Question

MDN 文档说：

因为所有节点都一次插入到文档中，所以如果单独插入每个插入的节点，只会触发一次重排和渲染，而不是可能触发一次。

所以

const el1 = document.createElement('div');
const el2 = document.createElement('div');
const df = document.createDocumentFragment();
df.appendChild(el1);
df.appendChild(el2);
document.body.appendChild(df);

好于

const el1 = document.createElement('div');
const el2 = document.createElement('div');
document.body.appendChild(el1);
document.body.appendChild(el2);

但是使用append呢？append和使用 documentFragment 一样高效吗？

const el1 = document.createElement('div');
const el2 = document.createElement('div');
document.body.append(el1,el2);

标签： javascripthtmldocumentfragment