4

¡Aprende a optimizar tus sitios web! - Resolviendo el reto de la clase de optimización

¡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

Clase con el reto de performance
Página para hacer el reto

Escribe tu comentario
+ 2
0
19387Puntos

Excelente tutorial. Gracias por tomarte el tiempo para hacer el video. En este punto no tengo más que el curso de JS Básico, tengo conceptos claros pero aún no escribo JS, así que la explicación que nos brindas nos da luces a los que no tenemos experiencia y venimos de cero con JS. Merecido 💚

🙌