Question

情况＆amp;问题
我的网站上有多个动画（css和javascript / jQuery），有时它会使我的网站口吃。

我的问题
如何查看特定动画（CSS，JavaScript和jQuery）在运行时和执行时间中使用了多少cpu

我知道如何查看整个站点的CPU使用情况，但不知道特定的动画。

Answer 1

单击F12，转到配置文件，单击开始。重新加载页面。

enter image description here

等待您的网页重新加载，然后点击停止。

点击您的个人资料，查看结果（Y）

enter image description here

Answer 2

前言：这不是一个完整的＆＃34;这样回答，而是我能在合理的时间内找到最好的。不发布我的结果似乎是一种耻辱，即使它们不是一个完美的答案......

它也只涵盖jQuery.animate;我没有调查CSS动画。

对于jQuery，至少，这很难;它不像浏览器＆＃34;知道＆＃34;关于一个jQuery动画。实际上，所有jQuery都安排了一个函数来运行 n 次setTimeout() 或setInterval()，其中每个函数调用将元素移动几个像素（或稍微更改一些其他内容），给出平滑动画的错觉。

您的浏览器必须以某种方式跟踪哪个函数调用所属哪个动画。由于这些是匿名函数，所以这不是真的 easy ...可以使用某种特殊的调试语句，但是AFAIK没有浏览器实现了这样的功能。

我们可以做的是衡量jQuery.animate更新的次数 step回调：

为每个动画元素的每个动画属性调用的函数。此函数提供修改Tween对象以更改的功能设置之前的属性值。

这只会给你一个近似。但也许它很好足够;我已经创建了一个示例（见下文），它给了我这些结果系统：

"a: 52 updates; 26 upd/s"
"b: 27 updates; 54 upd/s"
"c: 1080 updates; 360 upd/s"

您的系统可能会有所不同，但建议：

a是最便宜的;
b稍微有点冒犯，但实际上也很便宜
c比a或b贵几倍。

要检查这是否大致准确，我只启用一个动画时间，并检查这是否符合Chromium＆amp; Firefox开发人员工具报告：

Chromium：a花费40毫秒非闲置; Firefox：2次调用n.fx.tick
Chromium：b花费40毫秒非闲置; Firefox：4次调用n.fx.tick
Chromium：c花费130毫秒非闲置; Firefox：36次调用n.fx.tick

确实大致准确，但不完全。

这对您的应用程序是否足够有用？我不知道。也许，也许不是......

测试HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Animations test</title>
        <style>
            div { width: 200px; height: 100px; position: relative; color: #fff; }
            #test_a { background-color: green; }
            #test_b { background-color: red; }
            #test_c { background-color: blue; }
        </style>
    </head>

    <body>
        <div id="test_a"></div>
        <div id="test_b"></div>
        <div id="test_c"></div>

        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="anim.js"></script>
    </body>
</html>

在CoffeeScript中测试JS：

go = ->
    a = b = c = 0

    log = (n, t) ->
        eval "u = #{n}"
        str = "#{n}: #{u} updates; #{parseInt u / t, 10} upd/s"
        $("#test_#{n}").html str
        console.log str

    $('#test_a').animate {left: '500px'},
        duration: 500
        step: -> a += 1
        complete: -> log 'a', .5

    $('#test_b').animate {top: '100px', left: '100px', opacity: 0.3, width: '500px'},
        duration: 200
        step: -> b += 1
        complete: -> log 'b', 2

    $('#test_c').animate {left: '500px', top: '300px', opacity: .75, height: '50px', width: '400px'},
        duration: 3000
        step: -> c += 1
        complete: -> log 'c', 3

$(document).ready -> setTimeout go, 500

为方便起见，编译了同样的JS：

// Generated by CoffeeScript 1.7.1
(function() {
  var go;

  go = function() {
    var a, b, c, log;
    a = b = c = 0;
    log = function(n, t) {
      var str;
      eval("u = " + n);
      str = "" + n + ": " + u + " updates; " + (parseInt(u / t, 10)) + " upd/s";
      $("#test_" + n).html(str);
      return console.log(str);
    };
    $('#test_a').animate({
      left: '500px'
    }, {
      duration: 500,
      step: function() {
        return a += 1;
      },
      complete: function() {
        return log('a', .5);
      }
    });
    return;
    $('#test_b').animate({
      top: '100px',
      left: '100px',
      opacity: 0.3,
      width: '500px'
    }, {
      duration: 200,
      step: function() {
        return b += 1;
      },
      complete: function() {
        return log('b', 2);
      }
    });
    return $('#test_c').animate({
      left: '500px',
      top: '300px',
      opacity: .75,
      height: '50px',
      width: '400px'
    }, {
      duration: 3000,
      step: function() {
        return c += 1;
      },
      complete: function() {
        return log('c', 3);
      }
    });
  };

  $(document).ready(function() {
    return setTimeout(go, 500);
  });

}).call(this);

Answer 3

也许你可以使用Firefox安装console.profile（）。 http://www.stoimen.com/blog/2010/02/02/profiling-javascript-with-firebug-console-profile-console-time/

将console.profile()放在要测量的函数之前，并在方法之后放置console.profileEnd()。

<html>
  <body>
    <script>
      myFunc = function() {
        var a = [];
      }             

      console.profile();
      myFunc();
      console.profileEnd();
    </script>
  </body>
</html>

https://developer.chrome.com/devtools/docs/console-api 在这里，您可以找到更多调试方法。

修改：我刚刚找到另一个包含firebug扩展程序有用信息的网站： https://getfirebug.com/wiki/index.php/Console.profile

Answer 4

您可以尝试在每个jQuery动画的开头运行console.profile()实例，然后一次禁用一个动画进行调试。

据我所知，您无法分析CSS动画。只能通过JavaScript访问起始值和结束值。

function AnimateRotate(elem, angle, dur) {
  var $elem = $(elem);

  // we use a pseudo object for the animation
  // (starts from `0` to `angle`), you can name it as you want
  $({
    deg: 0
  }).animate({
    deg: angle
  }, {
    duration: dur,
    step: function(now) {
      // in the step-callback (that is fired each step of the animation),
      // you can use the `now` paramter which contains the current
      // animation-position (`0` up to `angle`)
      $elem.css({
        transform: 'rotate(' + now + 'deg)'
      });
    }
  });
}

$('#1').click(function() {
  console.profile('Animation #1');
  $(this).animate({
    'height': '100px',
    'width': '100px'
  }, function() {
    console.profileEnd('Animation #1');
  });
});

$('#2').click(function() {
  console.profile('Animation #2');
  AnimateRotate(this, 3000, 400);
  $(this).animate({
    'height': '300px',
    'width': '300px'
  }, function() {
    console.profileEnd('Animation #2');
  });
});

div {
  height: 10px;
  width: 10px;
  background-color: red;
  transform-origin: 60% 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1"></div>
<br>
<div id="2"></div>

配置文件特定动画CPU

4 个答案: