初識javascript 文檔碎片
更新時間：2010年07月13日 20:22:17 作者：
今天遇到一個問題: 我通過 ajax 取回另一個頁面的 Html 。但這些 HTML 我不想直接輸出，想通過 getElementsByName 處理后再輸出相應的內(nèi)容。用原生的 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 呢？
后來在網(wǎng)上搜索了一下相關資源才知道，document.createDocumentFragment 是用來創(chuàng)建文檔碎片的。
當我們需要大量 appendChild 頁面元素時，可以先將這些元素 appendChild 進document.createDocumentFragment。
然后只需 appendChild 文檔碎片到頁面就可以了。這樣就不用多次刷新頁面達到性能優(yōu)化的目的。上面那個代碼我覺得用到文檔碎片是多余的。
復制代碼 代碼如下:
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 呢？
后來在網(wǎng)上搜索了一下相關資源才知道，document.createDocumentFragment 是用來創(chuàng)建文檔碎片的。
當我們需要大量 appendChild 頁面元素時，可以先將這些元素 appendChild 進document.createDocumentFragment。
然后只需 appendChild 文檔碎片到頁面就可以了。這樣就不用多次刷新頁面達到性能優(yōu)化的目的。上面那個代碼我覺得用到文檔碎片是多余的。
相關文章
JavaScript中的普通函數(shù)與構造函數(shù)比較
這篇文章主要介紹了JavaScript中的普通函數(shù)與構造函數(shù)比較,需要的朋友可以參考下2015-04-04
js實現(xiàn)異步循環(huán)實現(xiàn)代碼
這篇文章主要介紹了js實現(xiàn)異步循環(huán)實現(xiàn)代碼,需要的朋友可以參考下2016-02-02
javascript閉包傳參和事件的循環(huán)綁定示例探討
按常理循環(huán)綁定事件，但是得到的結果卻不是想要的，下面有個不錯的示例，可以為大家詳細分解下2014-04-04
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)分頁加載效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
Bootstrap modal 多彈窗之疊加關閉陰影遮罩問題的解決方法
這里也會遇到一次性關閉所有modal引起陰影遮罩的問題，也就是所有modal都關閉了，但是主頁面仍然被陰影遮罩。下面通過本文給大家分享解決方案，需要的朋友參考下吧2017-02-02
JS獲取select-option-text_value的方法
這篇文章主要介紹了JS獲取select-option-text_value的方法，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了JavaScript把數(shù)組作為堆棧使用的方法,實例分析了javascript操作數(shù)組的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要給大家介紹了7道關于JS this的面試題，來看看你能答對幾個，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要為大家詳細介紹了Bootstrap導航中表單簡單實現(xiàn)代碼，含路徑導航的具體實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
下面小編就為大家?guī)硪黄狫S判斷是否在微信瀏覽器打開的簡單實例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08