JavaScriptrequestAnimationFrame


Sintaxis

  • window.requestAnimationFrame ( callback );
  • window.webkitRequestAnimationFrame ( callback );
  • window.mozRequestAnimationFrame ( callback );

Parámetros

Parámetro Detalles
llamar de vuelta "Un parámetro que especifica una función a la que llamar cuando sea el momento de actualizar su animación para el próximo repintado". ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

Observaciones

Cuando se trata de animar elementos DOM de manera fluida, estamos limitados a las siguientes transiciones CSS:

  • POSICIÓN - transform: translate (npx, npx);
  • ESCALA - transform: scale(n) ;
  • ROTACIÓN - transform: rotate(ndeg);
  • OPACIDAD - opacity: 0;

Sin embargo, el uso de estos no garantiza que las animaciones sean fluidas, ya que hace que el navegador inicie nuevos ciclos de paint , independientemente de lo que esté sucediendo. Básicamente, la paint se hace de manera ineficiente y su animación se ve "janky" porque los cuadros por segundo (FPS) sufren.

Para garantizar animaciones de DOM sin problemas, requestAnimationFrame debe usarse junto con las transiciones de CSS anteriores.

La razón por la que funciona, es porque la API requestAnimationFrame permite al navegador saber que desea que ocurra una animación en el próximo ciclo de paint , en lugar de interrumpir lo que está sucediendo para forzar un nuevo ciclo de pintura cuando se llama una animación que no es de la RAF .

Referencias URL
Que es jank http://jankfree.org/
Animaciones de alto rendimiento http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ .
CARRIL https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=es
Análisis de la ruta de representación crítica https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=es
Rendimiento de representación https://developers.google.com/web/fundamentals/performance/rendering/?hl=es
Analizando tiempos de pintura https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode?hl=es
Identificación de cuellos de botella de pintura https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=es

requestAnimationFrame Ejemplos relacionados