JavaScript 文档碎片 DocumentFragment 原理与性能优化解析

引言：技术群中的代码疑问

随后，一个技术交流群中有人提出了如下代码片段：

 
function html2node(s) {
var d = document.createElement('div');
d.innerHTML = s;
if (d.childNodes.length == 1)
return d.childNodes[0];
var df = document.createDocumentFragment();
while (d.firstChild)
df.appendChild(d.firstChild);
return df;
} 

核心解析：DocumentFragment的作用与性能优势

虽然大致原理清晰，但令人疑惑的是为何要使用 document.createDocumentFragment？

后经网络检索相关资料得知，document.createDocumentFragment 用于创建文档碎片。

若需大量向页面追加元素，可先将这些元素追加至 document.createDocumentFragment。

随后仅需将文档碎片追加至页面即可，此举避免了多次刷新页面，从而实现性能优化。我认为前述代码中使用文档碎片实属多余。