Профиль

Ситуация и проблема
У меня есть несколько анимаций (css и javascript/jQuery) на моем сайте, и иногда это заставляет меня заикаться.

Мой вопрос
Как я могу увидеть, сколько CPU специфическая анимация (как CSS, JavaScript, так и jQuery) используется во время исполнения и времени выполнения

Я знаю, как я могу видеть использование всего сайта, но не для конкретной анимации.

Ответ 1

Нажмите F12, перейдите к профилям, нажмите кнопку "Пуск". Перезагрузить страницу.

Подождите, пока ваша страница не будет перезагружена, и нажмите кнопку остановки.

Нажмите на свой профиль и посмотрите результат (Y)

Ответ 2

Предисловие. Это не "полный" ответ, как таковой, а лучшее, что я мог бы найти в течение разумного промежутка времени. Казалось, стыдно не публиковать мои результаты, хотя они не идеальный ответ...

Он также охватывает только jQuery.animate; Я не исследовал анимацию CSS.

Для jQuery, по крайней мере, это сложно; это не так, как браузер "знает" о анимация jQuery. Фактически, все jQuery выполняет функцию расписания n раз с setTimeout() или setInterval(), где каждый вызов функции перемещает элемент на несколько пикселей (или немного изменил что-то еще), создавая иллюзию плавной анимации.

Ваш браузер каким-то образом должен будет отслеживать, какой вызов функции принадлежит для которого анимация. Поскольку это анонимные функции, на самом деле это не так легко... Может быть использован какой-то специальный отладочный оператор, но AFAIK no браузер реализует такую функцию.

Что мы можем сделать, это измерить количество обновлений 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 и Firefox:

Хром: a потратил 40 мс без простоя; Firefox: 2 вызова n.fx.tick
Chromium: b потрачено 40 мс без простоя; Firefox: 4 вызова n.fx.tick
Хром: 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>

Тест JS в CoffeeScript:

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);

Ответ 3

Возможно, вы могли бы использовать console.profile() в Firefox. 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

Ответ 4

Вы можете попробовать запустить экземпляр console.profile() в начале каждой анимации jQuery, а затем отключить анимацию по одному для отладки.

Вы не можете профилировать анимацию 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>