如何衡量jQuery動畫與CSS3變換的性能？

我很好奇，如果有一種方法可以衡量什麼樣的CPU使用率發生在CSS3變換與基於JavaScript的動畫（jQuery，Dojo）之間。當然，在這種情況下，有一個優雅的跟蹤資源使用情況的解決方案。這裏有一個簡單的例子：如何衡量jQuery動畫與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>

來源

2010-12-09 Masondesu