¿Qué técnica de animación del DOM debes utilizar?

Ya viste tres técnicas que te permiten animar partes de tu página web: window.setInterval/setTimeout, window.requestAnimationFrame y animaciones/transiciones en CSS.

Cuando estás considerando qué técnica utilizar, debes tomar en cuenta estas preguntas:

Al hacer páginas web, estamos muy preocupados por el desempeño, así que nos gusta considerar eso como el criterio más importante. Sin embargo, el desempeño del navegador cambia cuando salen nuevos navegadores, y los navegadores móviles pueden desempeñarse de manera muy diferente de los navegadores de escritorio, así que la técnica que mejor se desempeña hoy puede que no sea la técnica que mejor se desempeñe mañana. Actualmente, las animaciones/transiciones en CSS son las que tienen mejor desempeño, después requestAnimationFrame, después setInterval.

Sin embargo, CSS no puede hacer todo. Por ejemplo, para dibujar pixeles y figuras en una etiqueta <canvas>, tienes que llamar a funciones como fillRect(), no puedes usar CSS. Tendrías que usar requestAnimationFrame o setInterval para llamar a esas funciones de manera periódica en su lugar. De hecho, eso es lo que hacemos aquí en Khan Academy, en nuestro entorno de ProcessingJS. ProcessingJS es una biblioteca de JS que escribe a una etiqueta <canvas>, y si defines una función draw() en tu código, entonces ProcessingJS usa setInterval para llamar esa función draw() repetidamente con base en el valor de frameRate.

A veces, quieres llamar funciones de JavaScript periódicamente, pero no porque quieras animar algo en la página. Puedes estar sondeando un servidor para actualizaciones, como lo hace Twitter cuando actualiza su lista en tiempo real. En ese caso, puedes simplemente utilizar setInterval y no importa que la sincronización no sea precisa, porque solo estás llamándolo más o menos cada minuto. Eso es lo que hacemos en Khan Academy en la página de solicitud de ayuda, para revisar continuamente nuevas solicitudes de ayuda cada 2 minutos.

Por supuesto, debes tener en mente la compatibilidad entre navegadores. Si estás escribiendo código que necesita funcionar en IE9, entonces no puedes usar requestAnimationFrame o animaciones en CSS. Tienes que utilizar una combinación de las técnicas que funcionen en distintos navegadores, o encontrar una biblioteca que lo haga por ti, como Velocity.js.

Hay mucho más que aprender acerca de estas técnicas. Sigue estos vínculos para aprender más:

Bono para fans de Doctor Who: uno de mis ejemplos favoritos del poder de las animaciones en CSS3 es esta TARDIS animada.