1、我們要明白當js操作dom時發生了什麼? 每次對dom的操作都會觸發"重排"(重新渲染界面,發生重繪或迴流),這嚴重影響到能耗,一般通常採取的做法是儘可能的減少 dom操作來減少"重排" 2、什麼是文檔碎片? document.createDocumentFragment() 一個容器,用於暫時 ...
1、我們要明白當js操作dom時發生了什麼?
每次對dom的操作都會觸發"重排"(重新渲染界面,發生重繪或迴流),這嚴重影響到能耗,一般通常採取的做法是儘可能的減少 dom操作來減少"重排"
2、什麼是文檔碎片? document.createDocumentFragment() 一個容器,用於暫時存放創建的dom元素
3、文檔碎片有什麼用? 將需要添加的大量元素 先添加到文檔碎片中,再將文檔碎片添加到需要插入的位置,大大 減少dom操作,提高性能(IE和火狐比較明顯)
比如需要往頁面上放100個元素:
普通方式:(操作了100次dom)
for(var i=100; i>0; i--){
var elem = document.createElement('div');
document.body.appendChild(elem);//放到body中 }
文檔碎片:(操作1次dom)
var df = document.createDocumentFragment();
for(var i=100; i>0; i--){
var elem = document.createElement('div');
df.appendChild(elem); }
//最後放入到頁面上
document.body.appendChild(df);