jQuery Parallax/Scroll Eventi Performance

Question

Questa domanda riguarda meno la parallasse che non per scorrere gli eventi. La mia preoccupazione principale per il mio progetto è che l'effetto di scroll parallasse sia fluido e non nervoso.

La mia domanda è: alcune proprietà si animano/scorrono meglio di altre? Ad esempio, la posizione di sfondo funziona meglio di dire aggiustare il margine superiore su scroll.

Answer 1

Non sono sicuro se alcune proprietà creano meno overhead durante l'animazione rispetto ad altre, ma Sarei molto interessato se qualcuno pubblicasse alcune informazioni valide su quell'argomento. Detto questo, conosco un paio di cose che possono aiutare le prestazioni.

L'impostazione position : absolute rimuove l'elemento dal flusso regolare della pagina e pertanto non richiede che l'intera pagina venga ridisegnata quando è animata. position : relative imporrà un ridisegno dell'intera pagina poiché gli elementi antenati e discendenti possono essere interessati.

Inoltre, è possibile limitare l'evento scroll ed ancora ottenere 30 fps:

var scroll_ok = true; 
setInterval(function() { 
    scroll_ok = true; 
}, 33);//33ms is 30fps, you can try changing this to something larger for better performance 
$(window).bind('scroll', function() { 
    if (scroll_ok === true) { 
     scroll_ok = false; 
     //now run your code to animate with respect to scroll 
    } 
}); 

AGGIORNAMENTO :: 2014-08-26

cose sono cambiate da questo è stato scritto in origine. Alcune note rapide:

• Browser moderni ora cercano su GPU accelerare la pittura di elementi dato un insieme specifico di proprietà (opacity e transform fuori dalla parte superiore della mia testa). L'utilizzo di queste proprietà può migliorare notevolmente le prestazioni rispetto ad altre come top/left (che richiede anche il ridisegno della pagina in più istanze rispetto all'utilizzo di transform).

• will-change è una nuova proprietà appena raccolta dai browser. In pratica puoi impostare un elenco di proprietà che è probabile che cambino in modo che il browser possa ottimizzare il cambio di proprietà prima del tempo.

• requestAnimationFrame ha un robusto polyfill e un buon supporto browser moderno. Questo è un modo molto migliore per animare facilmente gli elementi senza creare tonnellate di "chunk" mentre il browser eseguirà il rendering come può.