¡Hey! ¿Cómo te fue con el reto de performance de la clase 18? ¿Lograste resolverlo? Si no lo lograste, ¡no te preocupes! En este tutorial veremos cómo resolver dicho reto 😎
¿Por qué el código no está optimizado?
Para entender esto, debemos saber que todo proceso cuesta, debemos de tratar que la computadora haga el menor número de cálculos posibles.
.
La propiedad offsetTop le pide al navegador que calcule la distancia entre cierto elemento y el borde superior de la pantalla… Viste la palabra, ¿cierto?, “calcule”, todo cálculo conlleva un proceso, y este tomará tiempo de procesamiento, ¿no sería mejor simplemente leer una variable que ya existe? ¡Sí! Y esa es la idea, si una variable ya existe, ¿para qué calcularla de nuevo?
Optimizando el código
Bien, ahora que ya entendiste el problema procedamos a su optimización, si eres observador, verás que estamos pidiéndole al navegador en múltiples ocasiones que calcule el top, para resolver este problema he creado un video explicándote paso a paso cómo optimizar este código:
¡Genial! Ahora ya sabes cómo optimizar tu código, es sencillo, no hagas que el navegador tenga que hacer demasiados cálculos innecesarios, y por sobre todo, siempre elige leer un valor que ya está definido antes que calcularlo 😎.
.
Estaré pendiente de los comentarios por si tienes alguna duda, recuerda que puedes aprender más cosas como estas suscribiéndote a mi canal donde estaré subiendo cosas interesantes. 💚
Enlaces relacionados
Curso de Debugging con Chrome DevTools
