原生JS运动框架性能优化问题???
这个运动框架在性能方面有没有修改优化的地方呢，比如 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>
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论