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