JS——DOM操作（普通添加li元素和文件碎片添加li元素）

創建10000個li元素案例，把普通方法和碎片化方法進行比較

（1）普通添加li元素案例，代碼如下圖：

運行結果見鏈接： 

 https://ytraister.github.io/js-text/js%E4%BB%A3%E7%A0%81%E6%BC%94%E7%A4%BA/JS%E2%80%94%E2%80%94%E6%99%AE%E9%80%9A%E6%B7%BB%E5%8A%A0li%E5%85%83%E7%B4%A0%E5%92%8C%E6%96%87%E4%BB%B6%E7%A2%8E%E7%89%87%E6%B7%BB%E5%8A%A0li%E5%85%83%E7%B4%A0/(1)%E6%99%AE%E9%80%9A%E6%B7%BB%E5%8A%A0li%E5%85%83%E7%B4%A0.html

 

（2）文件碎片形式添加li元素，代碼如下圖：

運行結果見鏈接： 

 https://ytraister.github.io/js-text/js%E4%BB%A3%E7%A0%81%E6%BC%94%E7%A4%BA/JS%E2%80%94%E2%80%94%E6%99%AE%E9%80%9A%E6%B7%BB%E5%8A%A0li%E5%85%83%E7%B4%A0%E5%92%8C%E6%96%87%E4%BB%B6%E7%A2%8E%E7%89%87%E6%B7%BB%E5%8A%A0li%E5%85%83%E7%B4%A0/(2)%E6%96%87%E4%BB%B6%E7%A2%8E%E7%89%87%E6%B7%BB%E5%8A%A0li%E5%85%83%E7%B4%A0.html

 

語法解釋：

1>>　　在瀏覽器中，我們一旦把節點添加到document.body（或者其他節點）中，頁面就會更新並反映出這個變化，對於少量的更新，一條條循環插入也會運行很好，也是我們常用的方法。【即，上面的（1）普通添加方法】

2>>　　但是，如果當我們要向document中添加大量數據時(比如1w條)，如果像上面的代碼一樣，逐條添加節點，這個過程就可能會十分緩慢。 

3>>　　當然,你也可以建個新的節點,比如說div,先將oP添加到div上,然后再將div添加到body中.但這樣要在body中多添加一個<div></div>.但文檔碎片不會產生這種節點.

4>>　　為了解決這個問題，我們可以引入createDocumentFragment()方法，它的作用是創建一個文檔碎片，把要插入的新節點先附加在它上面，然后再一次性添加到document中。【即，上面的（2）文檔碎片添加方法】

5>>　　經過測試，在ie，firefox下性能明顯得以提高。大家可以自己測試下。 

 

//解釋摘自：https://blog.csdn.net/yuanyuanispeak/article/details/70161786