如何衡量jQuery動畫與CSS3轉換的性能？
[英]How to measure performance of jQuery animations vs. CSS3 transforms?
問題描述
我很好奇，是否有一種方法可以衡量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>
3 個解決方案
解決方案1
4 2010-12-31 15:01:22
您看過JPU嗎？ 這是一個Javascript小書簽，用於嘗試測量CPU使用率。 它適用於某些事物，但對於像這樣的簡單動畫，我不確定它使用的果汁是否足以在儀表上記錄。
http://webreflection.blogspot.com/2007/09/jpu-javascript-cpu-monitor.html
解決方案2
1 已采納 2010-12-09 16:12:26
您無法跟蹤用戶的cpu使用情況，也無法從服務器端查看，因為該服務器不在此處運行，
您可以跟蹤的2件事是fps和持續時間，並且在像這樣的簡單任務上，我懷疑您會注意到更大的差異，您可以使用相同的動畫制作1000個對象，但是誰會訪問您的網站
您應該做的是在運行2種不同方法的您自己的計算機上對其進行多次測試，並查看您的CPU使用率如何變化以及thoose 2造成的差異
解決方案3
0 2011-03-31 14:05:50
我將每個對象制作1000個，然后從經驗上應該清楚發生了什么。
性能：CSS3動畫與HTML5 Canvas
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.