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). 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-o开发者_开发百科ut;
transition: all 1s ease-in-out;
}
#object2:hover {
margin-left: 120px;
}
</style>
</head>
<body>
<div id="object1"></div>
<div id="object2"></div>
</body>
</html>
Have you looked at JPU? It's a Javascript bookmarklet that attempts to measure CPU usage. 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
you can't track user's cpu usage nor can you see from the server side since it doesn't run there,
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
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
I'd make 1000 of each object, then it should be empirically clear what's going on.
加载中,请稍侯......
精彩评论