初识javascript 文档碎片
时间：2021-03-25 09:20:22|栏目：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 文档碎片到页面就可以了。这样就不用多次刷新页面达到性能优化的目的。上面那个代码我觉得用到文档碎片是多余的。
复制代码 代码如下:
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 文档碎片到页面就可以了。这样就不用多次刷新页面达到性能优化的目的。上面那个代码我觉得用到文档碎片是多余的。
上一篇：JS中的BOM应用
栏 目：JavaScript代码
本文标题：初识javascript 文档碎片
本文地址：http://www.codeinn.net/misctech/87889.html
