https://www.cnblogs.com/liyunhua/p/4529086.html#_label11 參考原文
1. 使用DocumentFragment優(yōu)化多次append
- 給頁面注入大量li怎么提高速率
- 使用文檔碎片 document.createDocumentFragment
- 減少頁面重繪重排
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
document.body.appendChild(el);
}
var frag = document.createDocumentFragment();
for (var i = 0; i < 1000; i++) {
var el = document.createElement('p');
el.innerHTML = i;
frag.appendChild(el);
}
document.body.appendChild(frag);
2. 使用一次innerHTML賦值代替構(gòu)建dom元素
- 對于大的DOM更改涵妥，使用innerHTML要比使用標(biāo)準(zhǔn)的DOM方法創(chuàng)建同樣的DOM結(jié)構(gòu)快得多衍慎。
var html = [];
for (var i = 0; i < 1000; i++) {
html.push('<p>' + i + '</p>');
}
document.body.innerHTML = html.join('');
3. 刪除dom節(jié)點(diǎn)之前,一定要刪除注冊在該節(jié)點(diǎn)上的事件
- 否則將會產(chǎn)生無法回收的內(nèi)存
- 在removeChild和innerHTML=’’選擇后者
4. 使用事件代理
- 解釋：把一個或一組元素的事件委托到它的父層或更外層元素上销部，真正綁定事件的是外層元素疮薇，當(dāng)事件響應(yīng)到需要綁定的元素上時(shí)，會通過事件冒泡機(jī)制從而觸發(fā)它的外層元素的綁定事件上赴叹，然后在外層元素上去執(zhí)行函數(shù)
- 優(yōu)點(diǎn)：減少內(nèi)存消耗耸弄，動態(tài)綁定事件（新增元素也會綁定上事件）
