jQuery Parallax/Scroll Events Rendimiento

Question

Esta pregunta se refiere menos a paralaje que a los eventos de desplazamiento. Mi principal preocupación con mi proyecto es que el efecto de desplazamiento de paralaje es suave y no nervioso.

Mi pregunta es, ¿ciertas propiedades animan/desplazan mejor que otras? Por ejemplo, la posición de fondo funciona mejor que decir el ajuste de margen superior en desplazamiento.

Answer 1

No estoy seguro de si algunas propiedades generan menos sobrecarga al animar que otras, pero Me interesaría mucho que alguien publicara buena información sobre ese tema. Dicho esto, sé de un par de cosas que pueden ayudar al rendimiento.

La configuración position : absolute elimina el elemento del flujo normal de la página y, por lo tanto, no requiere que se redibuje toda la página cuando se anima. position : relative forzará un redibujado de toda la página, ya que los elementos antecesores y descendientes pueden verse afectados.

Además, se puede estrangular el evento scroll y aún así lograr 30fps:

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

ACTUALIZACIÓN :: 2014-08-26

Las cosas han cambiado desde que esto fue escrito originalmente. Unas pocas notas rápidas:

• navegadores modernos ahora intentan acelerar la GPU de la pintura de elementos dados un conjunto específico de propiedades (opacity y transform la parte superior de la cabeza). El uso de estas propiedades puede mejorar enormemente el rendimiento en comparación con otras, como top/left (que también requieren volver a dibujar la página en más casos que utilizando un transform).

• will-change es una nueva propiedad que acaba de ser recogida por los navegadores. Básicamente puede establecer una lista de propiedades que probablemente cambien para que el navegador pueda optimizar el cambio de propiedad con anticipación.

• requestAnimationFrame tiene un robusto polyfill y un buen soporte para navegadores modernos. Esta es una forma mucho mejor de animar elementos sin crear toneladas de "fragmentos", ya que el navegador los renderizará como sea posible.