如何衡量jQuery动画与CSS3转换的性能？
[英]How to measure performance of jQuery animations vs. CSS3 transforms?
问题描述
I was curious if there is a way to measure what kind of CPU usage occurs when it comes to CSS3 transforms versus javascript based animations (jQuery,Dojo). 
我很好奇，是否有一种方法可以衡量CSS3转换与基于JavaScript的动画（jQuery，Dojo）相比时发生的CPU使用率。 Surely there's an elegant solution for tracking resource usage with this kind of situation. 当然，有一种优雅的解决方案可以跟踪这种情况下的资源使用情况。 Here's a simple example: 这是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#object1').hover(function(){
$(this).animate({marginLeft: '120px'}, 1000);
}, function(){
$(this).animate({marginLeft: '0px'}, 1000);
});
});
</script>
<style>
#object1 {
height: 400px;
width: 400px;
background: #4f9a23;
}
#object2 {
height: 400px;
width: 400px;
background: #343434;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#object2:hover {
margin-left: 120px;
}
</style>
</head>
<body>
<div id="object1"></div>
<div id="object2"></div>
</body>
</html>
3 个解决方案
解决方案1
4 2010-12-31 15:01:22
Have you looked at JPU? 您看过JPU吗？ It's a Javascript bookmarklet that attempts to measure CPU usage. 这是一个Javascript小书签，用于尝试测量CPU使用率。 It works well for some things but for a simple animation like this I'm not sure it uses enough juice to register on the meter. 它适用于某些事物，但对于像这样的简单动画，我不确定它使用的果汁是否足以在仪表上记录。
http://webreflection.blogspot.com/2007/09/jpu-javascript-cpu-monitor.html http://webreflection.blogspot.com/2007/09/jpu-javascript-cpu-monitor.html
解决方案2
1 已采纳 2010-12-09 16:12:26
you can't track user's cpu usage nor can you see from the server side since it doesn't run there, 您无法跟踪用户的cpu使用情况，也无法从服务器端查看，因为该服务器不在此处运行，
2 things you can track is fps and time duration and on a simple task like that i doubt you notice any bigger diffrence, you could make 1000 object with the same animation but who would visit your site then 您可以跟踪的2件事是fps和持续时间，并且在像这样的简单任务上，我怀疑您会注意到更大的差异，您可以使用相同的动画制作1000个对象，但是谁会访问您的网站
what you should do is test it multiple times on your own computer running 2 diffrent methods and look how your cpu usage changes and what diffrence thoose 2 makes 您应该做的是在运行2种不同方法的您自己的计算机上对其进行多次测试，并查看您的CPU使用率如何变化以及thoose 2造成的差异
解决方案3
0 2011-03-31 14:05:50
我将每个对象制作1000个，然后从经验上应该清楚发生了什么。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.