diseño arquitectónico de animación JS para un rendimiento óptimo

Question

Las ganancias de rendimiento de GreenSock animation engine son bastante dramática.

¿Qué decisiones arquitectónicas subyacentes y compensaciones está haciendo esta biblioteca para lograr tales ganancias? En particular, ¿qué hace este motor diferente a jQuery animate?

Answer 1

Tan rápido como sé por la versión flash:

• su construcción/diseñado y optimizado para la velocidad, jQuery es crear un flujo de trabajo consistente.
• Su uso de la agrupación de objetos, también conocido como el reciclaje de múltiples tipos de objetos internos para minimizar la creación de instancias
• sus mediante bucles optimizados para cada escenario
• su información utilizando objetos para ayudar a/Estado qué propiedades están animando.
• im no estoy seguro de si utilizan las mismas funciones de relajación, pero eso podría hacer la diferencia también.

Tweenlite tiene una larga historia como tweenengine, también tiene muchas características que no están incluidas en jQuery.

Answer 2

gran respuesta en este caso de la gente en GreenSock:

1. uso de JavaScript altamente optimizado en todos los ámbitos (esto conlleva muchos cosas como el uso de listas enlazadas, variables locales de búsqueda rápida mesas, código inline, operadores bit a bit , aprovechando los prototipos en lugar de las funciones que recrean/variables para cada instancia, etc.)
2. la ingeniería de la estructura de la plataforma de manera que se presta muy bien a situaciones de alta presión, reduciendo al mínimo las llamadas a funciones y asegurándose t las apuestas son amigables para los gc.
3. Realice actualizaciones en una sola actualización bucle que es accionado por requestAnimationFrame, solo retrocediendo a setTimeout() si es necesario.
4. Guarda en caché algunos valores importantes internamente para actualizaciones más rápidas.
5. Para las transformaciones CSS, calculamos los valores de matriz y construimos una matriz() o matrix3d ​​() cuando hay alguna rotación o sesgo porque nuestras pruebas mostraron que era más rápido.

Más aquí: http://forums.greensock.com/topic/9346-how-does-greensock-perform-better-than-other-solutions-for-animation/#entry37777