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

Question

我很好奇，是否有一种方法可以衡量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>

Answer 1

您看过JPU吗？ 这是一个Javascript小书签，用于尝试测量CPU使用率。 它适用于某些事物，但对于像这样的简单动画，我不确定它使用的果汁是否足以在仪表上记录。

http://webreflection.blogspot.com/2007/09/jpu-javascript-cpu-monitor.html

Answer 2

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

您可以跟踪的2件事是fps和持续时间，并且在像这样的简单任务上，我怀疑您会注意到更大的差异，您可以使用相同的动画制作1000个对象，但是谁会访问您的网站

您应该做的是在运行2种不同方法的您自己的计算机上对其进行多次测试，并查看您的CPU使用率如何变化以及thoose 2造成的差异

Answer 3

我将每个对象制作1000个，然后从经验上应该清楚发生了什么。

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

问题描述

3 个解决方案

解决方案1
4 2010-12-31 15:01:22

解决方案2
1 已采纳 2010-12-09 16:12:26

解决方案3
0 2011-03-31 14:05:50

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

问题描述

3 个解决方案

解决方案1 4 2010-12-31 15:01:22

解决方案2 1 已采纳 2010-12-09 16:12:26

解决方案3 0 2011-03-31 14:05:50

解决方案1
4 2010-12-31 15:01:22

解决方案2
1 已采纳 2010-12-09 16:12:26

解决方案3
0 2011-03-31 14:05:50