Profilspezifische Animations-CPU

Question 1

Situation & Problem

Ich habe mehrere Animationen (CSS und Javascript/jQuery) auf meiner Website und manchmal stottert meine Website.

Meine Frage

Wie kann ich sehen, wie viel CPU eine bestimmte Animation (sowohl CSS, JavaScript als auch jQuery) zur Laufzeit und Ausführungszeit verbraucht

Ich weiß, wie ich die CPU-Auslastung der gesamten Site sehen kann, aber nicht für eine bestimmte Animation.

Question 2

Klicken Sie auf F12, Gehe zu Profilen, klicke auf Start. Seite neuladen.

Warten Sie, bis Ihre Seite neu geladen wurde, und klicken Sie auf Stopp.

Klicken Sie auf Ihr Profil und sehen Sie das Ergebnis (Y)

Question 3

Vielleicht könnten Sie mit Firefox console.profile() verwenden.
http://www.stoimen.com/blog/2010/02/02/profiling-javascript-with-firebug-console-profile-console-time/

Stellen console.profile() vor der zu messenden Funktion und console.profileEnd() nach der Methode.

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

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

https://developer.chrome.com/devtools/docs/console-api
Hier finden Sie weitere Methoden zum Debuggen.

Bearbeiten: Ich habe gerade eine andere Seite mit nützlichen Informationen für die Firebug-Erweiterung gefunden:
https://getfirebug.com/wiki/index.php/Console.profile

Question 4

Vorwort: Dies ist keine “vollständige” Antwort als solche, sondern die beste, die ich in angemessener Zeit finden konnte. Es schien eine Schande zu sein nicht Poste meine Ergebnisse, auch wenn sie keine perfekte Antwort sind …

Es deckt auch nur jQuery.animate; CSS-Animationen habe ich nicht untersucht.

Zumindest für jQuery ist das schwierig; Es ist nicht so, dass der Browser von einer jQuery-Animation “weiß”. Tatsächlich ist alles, was jQuery tut, die Ausführung einer Funktion zu planen n mal mit setTimeout()
oder setInterval()wobei jeder Funktionsaufruf das Element um ein paar Pixel verschiebt (oder etwas anderes ein wenig ändert), wodurch die Illusion von glatten Animationen entsteht.

Ihr Browser müsste irgendwie verfolgen, welcher Funktionsaufruf zu welcher Animation gehört. Da dies anonyme Funktionen sind, ist dies nicht wirklich einfach … Es könnte eine Art spezielle Debugging-Anweisung verwendet werden, aber AFAIK implementiert kein Browser eine solche Funktion.

Was wir kann Messen Sie die Anzahl der Updates jQuery.animate macht mit dem
step zurückrufen:

Eine Funktion, die für jede animierte Eigenschaft jedes animierten Elements aufgerufen werden soll. Diese Funktion bietet die Möglichkeit, das Tween-Objekt zu ändern, um den Wert der Eigenschaft zu ändern, bevor sie festgelegt wird.

Dadurch erhalten Sie nur eine Annäherung, bestenfalls. Aber vielleicht ist es gut genug; Ich habe ein Beispiel erstellt (siehe unten), das mir diese Ergebnisse auf meinem System liefert:

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

Ihr System kann variieren, schlägt aber Folgendes vor:

a war das billigste;

b etwas teurer, aber auch recht günstig
c ist um ein Vielfaches teurer als a oder b.

Um zu überprüfen, ob dies der Fall ist grob genau, ich habe nur aktiviert eines Animation zu einem Zeitpunkt und überprüft, ob dies mit dem übereinstimmt, was die Chromium- und Firefox-Entwicklertools melden:

Chrom: a verbrachte 40 ms nicht im Leerlauf; Firefox: 2 Aufrufe an n.fx.tick
Chrom: b verbrachte 40 ms nicht im Leerlauf; Firefox: 4 Aufrufe an n.fx.tick
Chrom: c verbrachte 130 ms nicht im Leerlauf; Firefox: 36 Aufrufe an n.fx.tick

Was in der Tat ist grob genau, wenn auch nicht ganz.

Wird dies für Ihre Anwendung nützlich genug sein? Ich habe keine Ahnung. Vielleicht, vielleicht nicht…

Test-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 in CoffeeScript testen:

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

Und das gleiche JS wurde der Einfachheit halber kompiliert:

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

Question 5

Sie können versuchen, a auszuführen console.profile() -Instanz zu Beginn jeder jQuery-Animation und deaktivieren Sie dann die Animationen nacheinander, um sie zu debuggen.

Soweit ich weiß, können Sie CSS-Animationen nicht profilieren. Nur die Start- und Endwerte sind über JavaScript zugänglich.

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>