javascript操作DOM之性能优化
什么是DOM?
用于操作XML和HTML文档的应用程序
Dom节点 2. Dom树 3.Dom API
DOM优化
浏览器会把js和dom独立实现，js每次操作dom，都会增加一次耗时，为了提高dom性能，就要尽可能减少js对dom的操作，
以下是两个测试
<script>
window.onload=function(){
var div=document.getElementById('div');
var str='';
console.time('test1');
for(var i=0;i<5000;i++){
div.innerHTML+='a';
}
console.timeEnd('test1');//FireFox下 测试时间152ms
console.time('test2');
for(i=0;i<5000;i++){
str+='a';
}
div.innerHTML=str;
console.timeEnd('test2');//FireFox下 测试时间1.36ms
};
</script>
</head>
<body>
<div id="div"></div>
</body>
可以明显看出，test2只操作了一次dom，性能提高了很多
减少DOM操作的方法：
使用节点克隆 node.cloneNode()代替创建新的重复节点
使用局部变量代替访问节点集合，例如
var doc=document;
var div=doc.getElementById('div');
var input=doc.getElementById('input');
尽量用只获取元素节点的获取方式,例如 使用children代替childNodes firstElementChild代替firstChild
选择器API: 使用querySelectorAll(除IE8以下的浏览器都得到良好支持)
DOM与浏览器
重排：改变页面内容的过程
重绘：重排结束之后，浏览器显示内容的过程
可以通过以下的方式减少重排和重绘的过程，从而提升浏览器性能
尽量在appendChild（）前面进行操作
for(var i=0;i<50000;i++){
var li=document.createElement('li');
//不推荐
ul.appendChild(li);
li.innerHTML='li';
}
for(i=0;i<5000;i++){
var li=document.createElement('li');
//推荐
li.innerHTML='li';
ul.appendChild(li);
}
使用cssText合并dom操作
缓存布局信息. 例如：
window.onload = function(){
var oDiv = document.getElementById('div1');
var L = oDiv.offsetLeft;
var T = oDiv.offsetTop;
setInterval(function(){
L++;
T++;
oDiv.style.left = L + 'px';
oDiv.style.top = T + 'px';
},30);
};
利用文档碎片
window.onload = function(){
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);
};
DOM与事件
通过事件代理（事件委托）来提升浏览器性能
console.time('test1');
for(i=0;i<oLi.length;i++){
oLi[i].onclick=function(){
alert(1);
};
}
console.timeEnd('test1');//火狐下测试 18ms
//下面是事件代理绑定事件
console.time('test2');
oUl.onclick=function(e){
e=e || event;
var t=e.target || e.srcElement;
if(t.nodeName.toLowerCase()=='li'){
t.onclick=function(){
alert(1);
};
}
};
console.timeEnd('test2');//火狐下测试 1.54ms
DOM与前端模板
更好的对逻辑和视图进行分离，MVC框架的基础
