JavaScript文檔碎片操作實(shí)例分析
更新時(shí)間：2015年12月12日 16:07:41 作者：挨踢前端
這篇文章主要介紹了JavaScript文檔碎片操作技巧,結(jié)合實(shí)例形式分析了JavaScript中使用文檔碎片優(yōu)化dom操作的技巧,需要的朋友可以參考下
本文實(shí)例分析了JavaScript文檔碎片操作方法。分享給大家供大家參考，具體如下：
使用文檔碎片在某些情況下可以提高頁(yè)面效率。
javascript操作dom是一個(gè)很耗性能的過程，在某些情況下，不得不進(jìn)行dom循環(huán)操作，我們每次對(duì)dom的操作都會(huì)觸發(fā)"重排"，這嚴(yán)重影響到能耗，一般通常采取的做法是盡可能的減少dom操作來減少"重排"。
面對(duì)循環(huán)操作dom的過程，我們選擇使用文檔碎片（creatDocumentFragment），將需要添加到dom中的內(nèi)容一次性添加到文檔碎片中，然后將文檔碎片添加到dom樹，這樣就可以有效的減少操作dom的次數(shù)。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文檔碎片</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
</head>
<body>
<script>
var temp = document.createDocumentFragment();//文檔碎片(當(dāng)把文檔碎片付給某節(jié)點(diǎn)時(shí)，只是把文檔碎片中的子節(jié)點(diǎn)付給了某節(jié)點(diǎn)，它本身并沒有插入到這個(gè)節(jié)點(diǎn)中)
for (var i=0; i<100; i++) {
var test =document.createElement('div');//創(chuàng)建一個(gè)節(jié)點(diǎn)
test.innerHTML = 'aaa' + i;//給節(jié)點(diǎn)添加內(nèi)容
temp.appendChild(test);//把創(chuàng)建的節(jié)點(diǎn)插入到temp文檔中
}
document.body.appendChild(temp);//把temp文檔插入到body末尾
</script>
</body>
</html>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
非?？岬膉s圖形漸隱導(dǎo)航菜單欄...2007-08-08
復(fù)制到剪貼板的js代碼（兼容ie、firefox、chorme、safari...什么都兼容！）2011-10-10
JavaScript Base64 作為文件上傳的實(shí)例代碼解析
這篇文章主要介紹了JavaScript Base64 作為文件上傳的實(shí)例代碼解析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁(yè)面
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁(yè)面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
本篇文章主要介紹了解決瀏覽器會(huì)自動(dòng)填充密碼問題的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
Bootstrap Table快速完美搭建后臺(tái)管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Bootstrap Table快速完美搭建后臺(tái)管理系統(tǒng)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要為大家詳細(xì)介紹了js如何編寫簡(jiǎn)單的ajax方法庫(kù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Javascript中判斷對(duì)象是否具有屬性的5種方法分享
這篇文章主要介紹了Javascript中判斷對(duì)象是否具有屬性的5種方法分享，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
下面小編就為大家?guī)硪黄猨s給table賦值的實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
頁(yè)面載入結(jié)束自動(dòng)調(diào)用js函數(shù)示例
當(dāng)頁(yè)面加載完成后自動(dòng)調(diào)用預(yù)先編好的js函數(shù)，在某些特殊情況下還是比較實(shí)用的，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-09-09