5
CSS3 dönüşümünde javascript tabanlı animasyonlara (jQuery, Dojo) karşı ne tür bir CPU kullanımının gerçekleştiğini ölçmenin bir yolu olup olmadığını merak ettim. Elbette, bu tür bir durumla kaynak kullanımını izlemek için zarif bir çözüm var.JQuery animasyonlarının ve CSS3 dönüşümlerinin performansı nasıl ölçülür?
<!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>
Teşekkürler, Breezer. Chrome Görev Yöneticisi açık bir şekilde jQuery animasyonu için daha yüksek cpu kullanımı rapor ediyor, ancak fareyi mümkün olduğunca hızlı bir şekilde fare üzerinde kaydırmaktan biraz daha ampirik bir şey varsa merak ediyorum. CPU kullanımının jQuery'den neredeyse iki katını alabileceğimi fark ettim, bu bir şey! – Masondesu