後來是一技術群問到以下一段代碼:
復制代碼 代碼如下:
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 文檔碎片到頁面就可以了。這樣就不用多次刷新頁面達到性能優化的目的。上面那個代碼我覺得用到文檔碎片是多余的。