Dom优化
1、innerHTML
//方案一 for (var i=0;i<5000;i++) { oUl.innerHTML += '<li></li>'; } //方案二 var str = ''; for (var i=0;i<5000;i++) { str += '<li></li>'; } oUl.innerHTML = str; //显然方案二比方案一更好,JS与DOM交互只需要一次,性能更好
2、Dom的操作与innerHTML比较,哪个性能好?
chrome:Dom(性能更好) innerHTML
FF: Dom innerHTML(性能更好)
3、节点克隆cloneNode性能更好,cloneNode(true)表示包括子节点一起克隆
//普通的DOM方法 console.time('Dom'); for (var i=0;i<5000;i++) { var oLi = document.createElement('li'); oLi.innerHTML = 'li'; oUl.appendChild(oLi); } console.timeEnd('Dom'); //cloneNode的方法 console.time('cloneNode'); var oLi = document.createElement('li'); oLi.innerHTML = 'li'; for (var i=0;i<5000;i++) { var newLi = oLi.cloneNode(true); //加上true,表示子节点都克隆 oUl.appendChild(newLi); } console.timeEnd('cloneNode');
4、访问元素集合的时候,尽量用局部变量
var aLi = document.getElementsByTagName('li'); for (var i=0;i<aLi.length;i++) { } //用局部变量,将len = aLi.length var aLi = document.getElementsByTagName('li');for (var i=0,len = aLi.length;i<len;i++) { } // var oUl = document.getElementById(); var oP = document.getElementById(); var oDiv = document.getElementById(); //用局部变量,更改如下: var doc = document; var oUl = doc.getElementById(); var oP = doc.getElementById(); var oDiv = doc.getElementById();
5、元素节点
比如:
childNode: 可以获取元素节点+文本节点
children:获取元素点(性能更好)
firstNode
firstElementNode(性能更好)
6、选择器API
利用querySelector、querySelectorAll,支持IE8+
var oUl = document.getElementById('ul1'); var aLi = oUl.getElementsByTagName('li'); //可以用以下的方法来代替,提高性能,只支持IE8+ var aLi = document.querySelectorAll('#ul li');
----------------------------------------------------------------------------------------------------------------
DOM与浏览器
重排(width,height),重绘(background)会影响性能
1、添加顺序(尽量在appendchild前添加操作)
var oUl = document.getElementById('ul1'); for (var i=0;i<5000;i++) { var oLi = document.createElement('li'); oUl.appendChild(oLi); oLi.innerHTML = 'li'; } /* 修改顺序如下,从页可以提高性能: var oLi = document.createElement('li'); oLi.innerHTML = 'li'; oUl.appendChild(oLi); */
2、合并Dom操作,使用cssText
var oUl = document.getElementById('ul1'); for (var i=0;i<5000;i++) { var oLi = document.createElement('li'); oLi.style.width = '100px'; oLi.style.height = '100px'; oLi.style.background = 'red'; oLi.innerHTML = 'li'; } /* 修改如下: oLi.style.cssText = 'width:100px;heigth:100px;background:red'; */
3、缓存布局信息
var oDiv = document.getElementById('div1'); setInterval(function(){ oDiv.style.left = oDiv.offsetLeft + 1 + 'px'; oDiv.style.height = oDiv.offsetTop + 1 + 'px'; },30) //修改如下,先把offsetLeft/offsetTop缓存起来 var oDiv = document.getElementById('div1'); var L = oDiv.offsetLeft; var T = oDiv.offsetTop; setInterval(function(){ L++; T++; oDiv.style.left = L + 'px'; oDiv.style.height = T + 'px'; },30)
4、使用文档碎片(createDocumentFragment)
//文档碎片就是类似一个袋子,先把东西存放在一个袋子里,最后再追加进去 var oUl = document.getElementById('ul1'); for (var i=0;i<5000;i++) { var oLi = document.createElement('li'); oUl.appendChild(oLi); } //修改如下: var oUl = document.getElementById('ul1'); var oFrag = document.createDocumentFragment(); for (var i=0;i<5000;i++) { var oLi = document.createElement('li'); oFrag.appendChild(oLi); } oUl.appendChild(oFrag);
5、事件委托