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

Question

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

Mas*_*art 5 javascript jquery animation css3

我很好奇是否有办法衡量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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Bre*_*zer 1

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

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

你应该做的是在你自己的计算机上运行 2 个不同的方法多次测试它，看看你的 cpu 使用率如何变化以及 thoose 2 产生了什么差异

归档时间：	15 年，9 月前
查看次数：	1073 次
最近记录：	11 年，4 月前