我想知道是否有一种方法可以测量CSS3转换和基于JavaScript的动画(jQuery,Dojo)之间发生的CPU使用情况。毫无疑问,对于这种情况,有一种优雅的解决方案来跟踪资源使用情况。以下是一个简单的示例:
<!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>