How to measure performance of jQuery animations vs. CSS3 transforms?
Question
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-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 answers
solution1
4 2010-12-31 15:01:22
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
solution2
1 ACCPTED 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,
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
solution3
0 2011-03-31 14:05:50
我将每个对象制作1000个，然后从经验上应该清楚发生了什么。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.