Los controladores de entrada son una posible causa de problemas de rendimiento en tus apps, ya que pueden bloquear la compleción de los fotogramas y generar trabajo de diseño adicional e innecesario.
Los controladores de entrada son una posible causa de problemas de rendimiento en tus apps, ya que pueden bloquear la finalización de los fotogramas y hacer que el trabajo de diseño.
Resumen
- Evita los controladores de entrada de larga duración. pueden bloquear el desplazamiento.
- No realices cambios de estilo en los controladores de entrada.
- Quita el rebote en los controladores. Almacena valores de eventos y realiza cambios de estilo en la próxima devolución de llamada requestAnimationFrame.
Evita los controladores de entrada de larga duración
En el caso más rápido posible, cuando un usuario interactúa con la página, el subproceso del compositor de la página puede tomar la entrada táctil del usuario y simplemente mover el contenido de un lado a otro. No requiere trabajo del subproceso principal, en el que se realizan JavaScript, el diseño, los estilos o la pintura.
Sin embargo, si adjuntas un controlador de entrada, como touchstart, touchmove o touchend, el subproceso del compositor debe esperar a que este controlador termine de ejecutarse, ya que puedes llamar a preventDefault() y detener el desplazamiento táctil. Incluso si no llamas a preventDefault(), el compositor debe esperar y, por lo tanto, se bloquea el desplazamiento del usuario, lo que puede provocar saltos y pérdidas de fotogramas.
En resumen, debes asegurarte de que los controladores de entrada que ejecutes se ejecuten rápidamente y permitan que el compositor haga su trabajo.
Cómo evitar los cambios de estilo en los controladores de entrada
Los controladores de entrada, como los de desplazamiento y toque, están programados para ejecutarse justo antes de cualquier devolución de llamada requestAnimationFrame.
Si realizas un cambio visual dentro de uno de esos controladores, al comienzo de requestAnimationFrame, habrá cambios de diseño pendientes. Si luego lees propiedades visuales al comienzo de la devolución de llamada requestAnimationFrame, como se sugiere en la sección “Evita diseños grandes y complejos, y la hiperpaginación de diseños”, activarás un diseño sincrónico forzado.
Elimina el efecto de rebote en los controladores de desplazamiento
La solución a los dos problemas anteriores es la misma: siempre debes anular los cambios visuales a la siguiente devolución de llamada requestAnimationFrame:
function onScroll (evt) {
// Store the scroll value for laterz.
lastScrollY = window.scrollY;
// Prevent multiple rAF callbacks.
if (scheduledAnimationFrame)
return;
scheduledAnimationFrame = true;
requestAnimationFrame(readAndUpdatePage);
}
window.addEventListener('scroll', onScroll);
Hacer esto también tiene el beneficio adicional de mantener los controladores de entrada ligeros, lo cual es increíble porque ahora no estarás bloqueando elementos como el desplazamiento o el toque en código costoso desde el punto de vista informático.