我很好奇是否有一种方法可以衡量 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>
最佳答案
你看过 JPU 吗？这是一个 Javascript 小书签，试图测量 CPU 使用率。它在某些方面效果很好，但对于像这样的简单动画，我不确定它是否使用了足够的果汁来在仪表上注册。
http://webreflection.blogspot.com/2007/09/jpu-javascript-cpu-monitor.html
关于javascript - 如何衡量 jQuery 动画与 CSS3 转换的性能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4400353/