Javascript 如何衡量jQuery动画与CSS3转换的性能？_Javascript_Jquery_Animation_Css

Javascript 如何衡量jQuery动画与CSS3转换的性能？

javascript jquery animation css

Javascript 如何衡量jQuery动画与CSS3转换的性能？,javascript,jquery,animation,css,Javascript,Jquery,Animation,Css,我很好奇，当涉及到CSS3转换和基于javascript的动画（jQuery、Dojo）时，是否有一种方法来衡量CPU的使用情况。在这种情况下，跟踪资源使用情况肯定有一个优雅的解决方案。下面是一个简单的例子： <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></sc

我很好奇，当涉及到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>


$（文档）.ready（函数（）{
$（'#object1'）。悬停（函数（）{
$（this.animate（{marginLeft:'120px'}，1000）；
}，函数（）{
$（this.animate（{marginLeft:'0px'}，1000）；
});
});
#反对意见1{
高度：400px；
宽度：400px；
背景：#4f9a23；
}
#反对意见2{
高度：400px；
宽度：400px；
背景:#3434；
-moz转换：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
过渡：所有1都易于输入输出；
}
#对象2：悬停{
左边距：120像素；
}

您无法跟踪用户的cpu使用情况，也无法从服务器端查看，因为它不在服务器端运行

你可以追踪的两件事是fps和持续时间，在这样一个简单的任务中，我怀疑你是否注意到任何更大的差异，你可以用相同的动画制作1000个对象，但是谁会访问你的站点呢

你应该做的是在你自己的计算机上运行两种不同的方法多次测试，看看你的cpu使用情况如何变化，以及thoose 2有什么不同你看过JPU吗？它是一个Javascript书签，试图测量CPU使用率。它在某些方面效果很好，但对于像这样一个简单的动画，我不确定它是否使用了足够的果汁来在计时器上注册

我会为每个物体制作1000个，然后根据经验应该可以清楚地知道发生了什么。

谢谢，布瑞泽。Chrome Task Manager显然报告jQuery动画的cpu使用率较高，但我很好奇，是否有比尽可能快地在div上滑动鼠标更经验性的东西。我确实注意到，我可以从jQuery中获得将近两倍的CPU使用率，所以这是很了不起的！