logo标签列表

如何衡量jQuery动画和CSS3变换的性能？

javascriptjqueryanimationcss
5

我想知道是否有一种方法可以测量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>
3个回答
4
1

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

你可以追踪的有两件事情是 FPS 和时间持续性，在一个简单的任务上这样做我怀疑你注意到任何更大的差异，你可以创建 1000 个具有相同动画的对象，但谁会访问你的网站呢。

你应该做的是在自己的电脑上运行两种不同方法并多次测试，观察你的 CPU 使用率如何变化以及这两种方法的差异。

谢谢，Breezer。Chrome任务管理器显然报告了更高的CPU使用率，但我很好奇是否有比我只是尽可能快地在div上划鼠标更具实证性的东西。我确实注意到我可以从jQuery中获得近乎双倍的CPU使用率，所以这是一件值得关注的事情！ - Mason Stewart
0

我会制造每个对象的1000个，这样就可以从经验上清楚地了解发生了什么。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接