初识javascript 文档碎片

248 阅读 0 评论 164 点赞

我是靠谱客的博主现代小甜瓜，最近开发中收集的这篇文章主要介绍初识javascript 文档碎片，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

后来是一技术群问到以下一段代码：

复制代码代码如下:

 
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; 
} 

大概的原理都明白，比较困惑的是为什么要用 document.createDocumentFragment 呢？
后来在网上搜索了一下相关资源才知道，document.createDocumentFragment　是用来创建文档碎片的。
当我们需要大量 appendChild 页面元素时，可以先将这些元素 appendChild 进document.createDocumentFragment。
然后只需 appendChild 文档碎片到页面就可以了。这样就不用多次刷新页面达到性能优化的目的。上面那个代码我觉得用到文档碎片是多余的。