Performante CSS3-Animation (Einfache Animation in den Chrome-Entwicklertools immer noch nicht performant)

Question

Ich habe Schwierigkeiten, einen Weg zu finden, CSS-Seitenübergänge in Google Chrome gut umzusetzen.

In den Chrome-Entwicklertools auf der Timeline sind mir einige rote Markierungen aufgefallen und alle sagen dasselbe: Lange Bildzeiten sind ein Hinweis auf Jank und schlechte Rendering-Leistung. Weitere Informationen finden Sie im Web Fundamentals Guide zur Rendering-Leistung.

Auf der App, an der ich arbeitete, schien das echt und ich versuchte zu untersuchen, konnte aber nicht die Quelle finden.

Ich habe eine einfachere Demo machen und ich bekomme immer noch die rote Markierung: http://codepen.io/anything/full/qOOpza/

.page { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#ccc; 
    &--1 { 
    background:green; 
    } 
    &--2 { 
    background: yellow; 
    } 
    &.moveToRight { 
     animation: moveToRight ease .5s; 
     animation-fill-mode: forwards; 
    } 

    &.moveToLeft { 
     animation: moveToLeft ease .5s; 
     animation-fill-mode: forwards; 
    } 
} 


@keyframes moveToRight { 
    from { } 
    to { transform: translateX(100%); } 
} 

@keyframes moveToLeft { 
    from { } 
    to { transform: translateX(0); } 
} 

Answer 1

Ich habe um mit ytour Demo zu spielen, und ich fand 2 Ausgaben:

Erstens, der Wechsel von übersetzen zu translate3d verbessert (zumindest in meinem System) ein wenig die Leistung. Also, das Schreiben

@keyframes moveToRight { 
    from {  transform: translate3d(0%, 0px, 0px); } 
    to {  transform: translate3d(100%, 0px, 0px); } 
} 

ist besser. (Dies wurde schon mehrmals gesagt, aber es ist immer gut zu überprüfen).

Auch eine neue Eigenschaft sollte etwas helfen. Einstellung

wird-ändern: umwandeln;

sollte den Browser auf eine zukünftige Änderung in dieser Eigenschaft vorbereiten. Aber ich konnte keinen Unterschied erkennen.

Zweitens scheint es ein Problem in der Art und Weise, wie Chrome Statistiken sammelt. Sie haben "Screenshots" aktiviert. Dies scheint die Hauptursache für die Verzögerungen zu sein, die Chrome benötigt, um die Screenshots zu rendern und zu speichern.

Per Definition sollte die Zeit, die ein Leistungstool benötigt, um seine Arbeit zu erledigen nicht in der Analyse berechnet werden. Aber das scheint hier nicht der Fall zu sein ... Ich würde sagen, das ist ein Fehler.

Zumindest in meinem Fall macht beide Probleme ändern sich die roten Markierungen verschwinden fast

Und in den übrigen markierten Bilder, es keine Performance-Problem zu sein scheint. Beachten Sie im Screenshot, dass die Frame-Dauer 25,57 ms lang ist, die CPU-Zeit jedoch 1,239 ms beträgt.