Menu
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>
691
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
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
