Optimización de un diseño intenso de gráficos y animaciones

Estoy trabajando en un sitio web que usa muchas imágenes grandes y mucho javascript.

Míralo aquí – http://joehamilton.info/1/1/

He estado tratando de mejorar el rendimiento y he tenido poco éxito. Simplemente me gustaría mantener la velocidad de fotogramas suave porque a veces se atasca.

Pensé que podría haber sido el código lo que lo estaba atascando, pero después de descubrir la creación de perfiles en Chrome, parece que el proceso de "pintura" está ralentizando las cosas.

Me pregunto qué podría hacer para mejorar las cosas. Estoy abierto a cualquier sugerencia, pero supongo que estaba pensando en este tipo de cosas: • ¿Ayudará la compresión de los archivos de imagen? • ¿Sería más rápido pintar una imagen de patrón repetitivo cuadrado de 300 px en un div cuadrado de 900 px que una imagen cuadrada de 900 px?

Es un sitio grande y complejo, por lo que preferiría no pasar mucho tiempo modificando cosas si no va a ayudar.

¿Algún experto en imágenes de trama por ahí?

preguntado el 12 de junio de 12 a las 12:06

¿Es normal que cuando me desplazo hasta el final me da un error? CSS Línea 389ish. Tardó mucho en cargar, pero cuando terminó de cargar, fue bastante rápido aquí. -

sí, es un poco desordenado. hay algunos errores que necesito solucionar -

oh sí... ¡eso era algo que tenía ahí para depurar otro problema! -

tarda aproximadamente un minuto en cargarse en Chrome, y no hay barra de carga ni nada. Entonces es un collage gigante con una barra de desplazamiento rota. -

1 Respuestas

Para cualquier cosa que se mueva, debe usar transiciones y transformaciones en lugar de jquery animate y background-position, ya que luego será acelerado por hardware en algunos navegadores. También evita tener que volver a pintar con tanta regularidad. http://css3.bradshawenterprises.com/demos/speed.php es un ejemplo que compara las dos técnicas en un caso ciertamente extremo.

Si no puede hacer eso, asegúrese de que su animación use requestAnimationFrame en lugar de un bucle setTimeout.

Eso debería ayudar mucho.

Respondido el 12 de junio de 12 a las 12:06

hmm.. Lo estoy leyendo, pero hay mucho por recorrer. ¿Cómo convertiría algo como esto para que use una transformación? $('#p6bg').css('posición de fondo', -scrollerCount/18+'px 0px'); - jose hamilton

$('#p6bg').css('-webkit-transform', 'translate('-scrollerCount/18+'px 0px)'); Deberia trabajar. Sin embargo, eso no tendrá ninguna animación a menos que agregue transiciones también. Además, querrá determinar el prefijo del proveedor y usarlo. - rico bradshaw

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.