5
Tenía curiosidad si hay una manera de medir qué tipo de uso de CPU se produce cuando se trata de transformaciones CSS3 frente a animaciones basadas en JavaScript (jQuery, Dojo). Seguramente hay una solución elegante para rastrear el uso de recursos con este tipo de situación. Aquí está un ejemplo sencillo:¿Cómo medir el rendimiento de las animaciones jQuery frente a las transformaciones CSS3?
<!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>
Gracias, Breezer. El Administrador de tareas de Chrome obviamente reporta un mayor uso de la CPU para la animación de jQuery, pero tengo curiosidad por saber si hay algo un poco más empírico que deslizar el mouse sobre el div tan rápido como pueda. Me di cuenta de que podía obtener casi el doble del uso de CPU de jQuery, ¡eso es algo! – Masondesu