码迷,mamicode.com
首页 > Web开发 > 详细

JS性能DOM优化

时间:2016-05-17 08:32:00      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:

什么是DOM?

  •  用于操作XML和HTML文档的应用程序
  1. 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操作的方法:
  1. 使用节点克隆 node.cloneNode()代替创建新的重复节点
  2. 使用局部变量代替访问节点集合,例如
    var doc=document;
       var div=doc.getElementById(‘div‘);
       var input=doc.getElementById(‘input‘);
  3. 尽量用只获取元素节点的获取方式,例如 使用children代替childNodes    firstElementChild代替firstChild
  4. 选择器API: 使用querySelectorAll(除IE8以下的浏览器都得到良好支持)

DOM与浏览器

  • 重排:改变页面内容的过程
  • 重绘:重排结束之后,浏览器显示内容的过程

       可以通过以下的方式减少重排和重绘的过程,从而提升浏览器性能

  1. 尽量在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}
  2. 使用cssText合并dom操作
  3. 缓存布局信息. 例如:
     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 };
  4. 利用文档碎片
    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优化

标签:

原文地址:http://www.cnblogs.com/neove/p/5495431.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!