JavaScript-原生JS运动框架性能优化问题???

发布于 2017-02-09 04:33:40 字数 2803 浏览 1212 评论 1

这个运动框架在性能方面有没有修改优化的地方呢，比如 for/in 能不能换成普通的for循环，如果可以该如何换？ setInterval能不能换成setTimeout ,如果可以，该如何换？

源码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>运动框架性能优化</title>
<script>
window.onload=function(){
 var ob=document.getElementById('b1');  
 
 startMove(ob,{"width":700,"height":700});   // 框架使用方法
} // end onload 

 function getStyle(obj,name){  // 获取属性值 用于运动框架里
     if(obj.currentStyle){
        return obj.currentStyle[name];   
         }else{
        return getComputedStyle(obj,false)[name];    
         }
     
     } //end getStyle 

 function startMove(obj,json){
      var totalOk,    // totalOk 为是否到达目标值 判断   curr当前对象的 要变化的属性值
          curr,         
          speed,
          attr;    
      clearInterval(obj.timer);  //先清空定时器
      
                
      obj.timer=setInterval(function(){
          totalOk=true;   // 是否到达目标 判断 变量
          for(attr in json){   //遍历 传进来的属性 {"height":xx,"width":xxx} 
          curr=0;
          if(attr=='opacity'){   // 透明度变化 与 宽高 等这些值变化 不一样  所以做个判断
              curr=Math.round(parseFloat(getStyle(obj,attr))*100);
              }else{
              curr=Math.round(parseInt(getStyle(obj,attr)));      
                  }   //  取属性值
                  
           speed=(json[attr]-curr)/10;   
           speed=speed>0?Math.ceil(speed):Math.floor(speed);  // 定义运动形式 及 初始化运动值
           
           if(curr!=json[attr])  // 如果 没到达 目标 为false;
               totalOk=false;
          
           if(attr=='opacity'){      // 透明度变化 与 宽高 等这些值变化 不一样  所以做个判断
                obj.style.filter='alpha(opacity:'+(curr+speed)+')';  //兼容IE6
                obj.style.opacity=(curr+speed)/100;
               }else{
                obj.style[attr]=curr+speed+'px';  
                   }          //  计算运动  
                   
                          
          } // end for/in 
          //循环结束后  判断所有动画是否已经执行到位 如果到位  则关闭定时器  否则继续执行动画  不关闭定时器
           if(totalOk){    // 如果到达目标 关闭定时器  
               clearInterval(obj.timer);
             }; 
        
      },10);
      
     } // end startMove; 

    

</script>
</head>

<body>

<div id="b1" style="width:100px;height:100px;background:#0099FF;"></div> 

</body>
</html>