JS性能DOM优化
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS性能DOM优化相关的知识，希望对你有一定的参考价值。
什么是DOM?
- 用于操作XML和html文档的应用程序
- Dom节点 2. Dom树 3.Dom API
DOM优化
- 浏览器会把js和dom独立实现，js每次操作dom，都会增加一次耗时，为了提高dom性能，就要尽可能减少js对dom的操作，
以下是两个测试
1 <script> 2 window.onload=function(){ 3 var div=document.getElementById(‘div‘); 4 var str=‘‘; 5 console.time(‘test1‘); 6 for(var i=0;i<5000;i++){ 7 div.innerHTML+=‘a‘; 8 } 9 console.timeEnd(‘test1‘);//FireFox下 测试时间152ms 10 11 console.time(‘test2‘); 12 for(i=0;i<5000;i++){ 13 str+=‘a‘; 14 } 15 div.innerHTML=str; 16 console.timeEnd(‘test2‘);//FireFox下 测试时间1.36ms 17 }; 18 </script> 19 </head> 20 <body> 21 <div id="div"></div> 22 </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（）前面进行操作
1 for(var i=0;i<50000;i++){ 2 var li=document.createElement(‘li‘); 3 //不推荐 4 ul.appendChild(li); 5 li.innerHTML=‘li‘; 6 } 7 for(i=0;i<5000;i++){ 8 var li=document.createElement(‘li‘); 9 //推荐 10 li.innerHTML=‘li‘; 11 ul.appendChild(li); 12}
- 使用cssText合并dom操作
- 缓存布局信息. 例如：
1 window.onload = function(){ 2 var oDiv = document.getElementById(‘div1‘); 3 var L = oDiv.offsetLeft; 4 var T = oDiv.offsetTop; 5 setInterval(function(){ 6 L++; 7 T++; 8 oDiv.style.left = L + ‘px‘; 9 oDiv.style.top = T + ‘px‘; 10 },30); 11 };
- 利用文档碎片
1 window.onload = function(){ 2 var oUl = document.getElementById(‘ul1‘); 3 var oFrag = document.createDocumentFragment(); 4 for(var i=0;i<5000;i++){ 5 var oLi = document.createElement(‘li‘); 6 oFrag.appendChild(oLi); 7 } 8 oUl.appendChild(oFrag); 9 };
DOM与事件
- 通过事件代理（事件委托）来提升浏览器性能
1 console.time(‘test1‘); 2 for(i=0;i<oLi.length;i++){ 3 oLi[i].onclick=function(){ 4 alert(1); 5 }; 6 } 7 console.timeEnd(‘test1‘);//火狐下测试 18ms 8 //下面是事件代理绑定事件 9 console.time(‘test2‘); 10 oUl.onclick=function(e){ 11 e=e || event; 12 var t=e.target || e.srcElement; 13 if(t.nodeName.toLowerCase()==‘li‘){ 14 t.onclick=function(){ 15 alert(1); 16 }; 17 } 18 }; 19 console.timeEnd(‘test2‘);//火狐下测试 1.54ms
DOM与前端模板
- 更好的对逻辑和视图进行分离，MVC框架的基础
以上是关于JS性能DOM优化的主要内容，如果未能解决你的问题，请参考以下文章