Averiguando en la ENCICLOPEDIA mundial he econtrado 10 maneras de optimizar JavaScript.
Es para mi un conocimiento nuevo y por eso estoy aprendiendo a poder dominar perfectamente estos codigos.
- Usar variables locales y no globales Usar variables locales y no globales es mucho más eficiente, pues las variables locales “let” ocupan menos espacio, ya que no tienen que estar siempre disponibles.
Adicionalmente, buscar variables globales “var” toma más tiempo, así que usar variables locales contribuye a un mejor rendimiento del código.
- Repeticiones Las repeticiones, desde hace un tiempo, tienen en los bloques for-of y for-in, estándares poco usados, pero que producen código más legible y claro. Por eso, aunque es fácil encontrar una tradicional cadena de for en un arreglo, así:
for (let j = 0; j < arr.length; j++) {
console.log(arr[j]);}
Puede obtenerse el mismo resultado utilizando for-of, con menos código:
for (let j of arr) {
console.log(j);}
En términos de eficiencia, lo que sí queda claro es que, hacer debug con un for-of es mucho más fácil y cómodo que con un for tradicional.
- Arreglos o Arrays Hay varias mejoras para optimizar los arreglos o arrays, como cuando se quiere resetear o limpiar un arreglo, muchos programadores lo hacen así: arr = []
Pero, esta instrucción vuelve a declarar el arreglo, por lo que se consumen más recursos, así que lo correcto es cambiar el tamaño del arreglo a cero: arr.length = 0.
Minificar el código Minificar el código es una técnica para reducir el tamaño de un archivo JavaScript, sin que pierda ninguna funcionalidad. Y como el tamaño del archivo afecta la velocidad de carga de la página, eliminar saltos de línea, espacios y comentarios reduce el problema.
Moderar las conexiones al servidor Moderar las conexiones al servidor equivale a reducir las veces que nos comunicamos con él y a reducir el tiempo de carga. Entonces, si se tienen varios archivos muy solicitados, es conveniente unirnos en uno solo.
Caché de solicitudes a servicios externos Almacenar en una variable temporal el contenido de un archivo JSON, equivale a almacenar en el caché, solicitudes a servicios externos. Si este contenido no cambia, aunque se hagan muchas referencias a él, mejorará el rendimiento del código JavaScript.
Cargar JavaScript El mejor momento para cargar JavaScript es cuando el contenido restante, ya está disponible y hay dos formas de hacerlo:
La primera, situando los scripts antes de cerrar el cuerpo o “body”. La segunda, utilizando los atributos “defer” o “async” en la etiqueta del script. La diferencia entre estas dos formas estriba en lo siguiente:
Con “defer”, al concluir la carga de la página, se ejecuta el script JavaScript. Con “async”, el script de JavaScript se ejecuta en paralelo con la carga de la página. Si no se utilizan ninguno de estos dos atributos, el script se ejecuta primero y a continuación, se hace la carga de la página.
Animaciones mejor hacerlas con CSS Una animación en JavaScript se logra actualizando la estructura del documento HTML o Document Object Model (DOM) para producir la simulación de movimiento. Lo que, en términos de consumo de CPU es muy pesado, por ello, las animaciones mejor hacerlas con CSS, que está preparado para animaciones de forma nativa. Con un consumo de CPU mucho más reducido, en todo sentido.
Usar funciones nativas Usar funciones nativas, que el lenguaje ya tiene implementadas, contribuye a ganar en el entendimiento y la depuración del código. Como las operaciones con arreglos: map, filter, reduce, some, every y forEach, entre otras funciones ahora nativas.
Dividir el código En pro de que el código se cargue más rápido, es útil dividir el código en trozos, que el navegador requiera a medida que el usuario navegue por la web.
