Chrom-timeline - wie kann ich bestimmen, die Ursache von einem "neu berechnen Style" log-Eintrag?

Profilierung eine Seite mit dem integrierten timeline-recorder in Chrome, die ich wiederholt sehen "neu berechnen Style" - Einträge. Sie haben keine offensichtlichen Informationen zu verknüpfen, um DOM-element oder-Ereignis.

Wie kann ich am besten ermitteln Sie die Ursache für diese Einträge?

InformationsquelleAutor der Frage Ben | 2012-01-18

  1. 7

    Mein Rat an Sie wäre, um die Chrome Canary build von Chrome. Paul Irish hat eine gute demo für die Verwendung der Timeline in den Chrome Dev Tools hier

    Klicken Sie einfach auf die Veranstaltung, zum Beispiel 'neu berechnen' - Stil, und Sie sollten eine Miniatur-stack-trace zeigte auf, wo das Ereignis aufgetreten ist in Ihrem code.

    InformationsquelleAutor der Antwort briangonzalez

  2. 4

    War ich in der Lage, um zu testen, ob die CSS-übergänge und Animationen-waren auslösendes Neuberechnungen auf meiner Seite. Ich benutzte jQuery um dies zu tun, aber Sie können verwenden, was Sie wollen: 

    $('*').css('transition', 'none');
$('*').css('animation', 'none');

    Diese effektiv deaktiviert übergänge und Animationen auf jedes element Ihrer Seite. Ich lief Sie ein zu einer Zeit, und dann reran mein profiling. In meinem Fall, die Animationen waren der übeltäter.

    .css('animation') zurückkehren wird, so etwas wie 

    "myCustomAnimation 15s linear 0s infinite normal none running"

    oder wenn es keine animation, 

    "none 0s ease 0s 1 normal none running"

    So nach dem regenerieren (zu reaktivieren, Animationen), der folgende Codeausschnitt Protokolle jedes element hat eine definierte animation: 

    $('*').each(function(){
  if($(this).css('animation').split(' ')[0] != 'none'){ //you could also check for infinite here if you want
    console.log(this);
  }
});

    Durch deaktivieren der Animationen auf jeder der individuell, ich war in der Lage zu bestimmen, welche von Ihnen verursacht meine Probleme.

    InformationsquelleAutor der Antwort adamdport

  3. 3

    Alternative zu den geposteten jQuery-version für die Untersuchung ist ein einfacher Einzeiler in der Konsole:

    window.onanimationiteration = console.log;

    Druckt eine Linie jedes mal, wenn eine animation ausgeführt wird, einschließlich der Namen der animation und dem element, in das die animation angewendet wird.

    InformationsquelleAutor der Antwort Knaģis

  4. 2

    Ich bin mir fast sicher, Sie haben eine unendliche Wiederholung der animation auf Ihrer Seite. Das ist, was verursacht eine Neuberechnung Stil, ohne zu sagen, was Sie verursacht.

    InformationsquelleAutor der Antwort Denis

  5. 1

    Ich hatte gerade das gleiche problem (deshalb fand ich deine Frage).

    Mein problem war, verursacht durch eine CSS3 transition alle-Eigenschaft. Ich war faul, als alle, die ich brauchte, war ein übergang Polsterung.

    Umsetzung, die einzige änderung die Schleife

    InformationsquelleAutor der Antwort jBoive

Schreibe einen Kommentar