Animazione CSS3 Performer (l'animazione semplice non è ancora performante negli Strumenti per sviluppatori di Chrome)

Question

Sto cercando di trovare un modo per rendere la transizione della pagina CSS molto efficace in google chrome.

Negli strumenti di sviluppo di Chrome sulla timeline ho notato alcuni indicatori rossi e tutti dicono la stessa cosa: i tempi di frame lunghi sono un'indicazione di jank e prestazioni di rendering scadenti. Maggiori informazioni sulla guida Fondamenti Web su Prestazioni di rendering.

Sull'app che stavo lavorando sembrava legittima e ho cercato di indagare, ma non ho trovato la fonte.

Ho fare un demo semplice e ho ancora ottenere il pennarello rosso: 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

Ho giocato in giro con ytour demo, e ho trovato 2 temi:

Innanzitutto, il passaggio da translate a translate3d migliora (almeno nel mio sistema) un po 'le prestazioni. Quindi, scrivendo questo

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

è meglio. (Questo è già stato detto diverse volte, ma è sempre bene controllare).

Inoltre, una nuova proprietà dovrebbe aiutare un po '. impostazione

cambierà: trasformare;

dovrebbe preparare il browser per una modifica futura in questa proprietà. Ma non sono stato in grado di vedere alcuna differenza.

In secondo luogo, sembra esserci un problema nel modo in cui Chrome raccoglie le statistiche. Hai "Schermate" abilitate. E questa sembra essere la causa principale dei ritardi, il tempo in cui Chrome deve eseguire il rendering e archiviare gli screenshot.

Per definizione, il tempo necessario a uno strumento di performance per eseguire il proprio lavoro non deve essere calcolato nell'analisi. Ma questo non sembra essere il caso qui ... direi che questo è un bug.

Almeno nel mio caso, cambiare entrambe le questioni rende gli indicatori rossi quasi scompaiono

E, nei restanti immagini contrassegnate, non sembra esserci alcuna problema di prestazioni. Si noti nello screenshot che la durata del frame è lunga 25.57 ms, ma il tempo della CPU è 1.239 ms.