Cómo acelerar la ejecución del código JavaScript

Al desarrollar una aplicación o un sitio web, uno de los elementos más cruciales a considerar es el rendimiento de la aplicación o el sitio web. Como usuario, no quisiera que ninguna aplicación tome mucho tiempo para cargar o cuando haga clic en algo y tengo que esperar alguna acción. A menudo, si la página web tarda de 5 a 6 segundos en cargar a la mayoría de los usuarios, incluido yo, salía de la página web.

Para los desarrolladores web, JavaScript es una herramienta fantástica. Cada desarrollador web aprendió JavaScript en algún momento de su vida. Sin embargo, el código de JavaScript pobre da como resultado sitios web más lentos.

Con esto en mente, un desarrollador siempre busca formas de mejorar su página web. Estás de suerte porque hoy vamos a hablar sobre cómo acelerar la ejecución del código JavaScript.

Reducción de actividades en bucles

Un programador a menudo usa bucles para acortar su código. Sin embargo, debe tenerse en cuenta que hay algunas malas formas de usar bucles que hacen que su programa sea lento.

Tomemos un ejemplo de bucle "para".

Ejemplo:

Este bucle es programáticamente correcto, pero su rendimiento será malo. Podemos poner el myArray.Declaración de longitud fuera del bucle para que no tenga que calcular la longitud una y otra vez hasta que termine el bucle.

Solución:

Deja que Len = myArray.longitud;
para (deja i = 0; yo < len; i++)
//Hola

En este bucle, podemos ver que la longitud es fija y el bucle no tiene que calcular la longitud de una matriz cada vez que itera. Por lo tanto, la velocidad aumenta y también lo hace el rendimiento.

Reducción de acceso DOM

Si comparamos la instrucción JavaScript con el acceso a HTML DOM, encontraremos que acceder a HTML DOM es muy lento. Esto no es un problema si no estamos accediendo o realizando muchas operaciones DOM. Sin embargo, cuando realiza muchas operaciones DOM, afecta la velocidad de la página web.

La solución para esto es almacenar el elemento DOM en una variable local y luego podemos acceder a eso varias veces.

Por ejemplo:

const myobj = documento.getElementById ("velocidad"), innerhtml = "no logrado";
const myobj = documento.getElementById ("velocidad").oculto = "falso";
// Ralentiza y dificulta la velocidad

Esto hace que nuestro programa se ejecute de manera ineficiente.

Veamos otro ejemplo que aborde este problema.

const myobj = documento.getElementById ("velocidad");
myobj.innerhtml = "logrado";
myobj.oculto = "falso";

Ahora que hemos analizado la reducción de acceso de DOM, hemos brindamos la luz sobre la reducción del tamaño de DOM para mejorar la velocidad de nuestra página web en JavaScript.

Reducción del tamaño de DOM

Antes de entrar en la reducción del tamaño de DOM, veamos el tamaño DOM excesivo, lo que significa que su página tiene demasiados nodos DOM/componentes HTML si el tamaño DOM es demasiado grande. También puede significar que su página DOM Elementos está profundamente anidada. Esto da como resultado el consumo de más potencia, por lo tanto, reduce el rendimiento o la velocidad de la página.

La solución es que el número de elementos debe minimizarse en el HTML DOM. La ventaja de esto es que mejorará la carga de la página, además de acelerar el proceso de renderizado, que es la visualización de la página. Es muy útil, especialmente en dispositivos más pequeños como teléfonos móviles, etc.

Eliminando variables innecesarias

Este es el truco más simple para mejorar el rendimiento de su página web. ¿Por qué hacer variables cuando no son necesarias?? Además, ¿por qué hacer variables donde sabes que solo lo estás usando para mostrarlo en algún lugar?? Cuando evitamos hacer variables innecesarias, nuestro rendimiento de la página web aumenta.

Por ejemplo, código malo:

Let FirstName = "Jhon";
Let dastName = "cena";
Let FullName = FirstName+""+LastName;
alerta (nombre completo);

En este ejemplo, podemos ver que estamos almacenando el nombre de primer nombre y el nombre de último nombre solo para mostrarlo en una alerta. ¿No sería mejor alertar directamente el nombre de primer nombre y el nombre de lo último?? Esto es lo que es eliminar variables innecesarias es.

Solución (buen código):

Let FirstName = "Jhon";
Let dastName = "cena";
alerta (FirstName+""+LastName);

Retrasar la carga de JavaScript

Para mejorar el rendimiento de su página web en JavaScript, es una práctica común poner una etiqueta de script o dentro de la etiqueta de script el código JavaScript al final de la página HTML. El objetivo principal es que el navegador debe cargar el HTML primero y luego el código JavaScript. Para ponerlo en términos técnicos, mientras se descarga un script, el navegador no iniciará ninguna otra descarga y todos los análisis y representación se bloquearán.

También podemos usar "diferir =" verdadero "" en nuestra etiqueta de script. La función del atributo de diferir es que especifica que el script solo debe ejecutarse una vez que la página esté terminada de análisis. En otras palabras, espera hasta que se cargue todo el DOM. Sin embargo, debe tenerse en cuenta que solo es compatible con scripts externos.

Ejemplo:

Evite usar la palabra clave "con"

Con la palabra clave se usa para hacer referencia a las propiedades o métodos de un objeto, ya que es una especie de taquigrafía. Usar la palabra clave "con" ralentiza la velocidad de caída. La otra razón para no usar con la palabra clave con la que se aplica a los alcances de JavaScript.

Minificar javascriptcode

La minificación o minimización del código JavaScript es otro método para acelerar la ejecución de nuestro código JavaScript. Minificar el código JavaScript simplemente significa eliminar o alterar todos los caracteres no deseados e innecesarios dentro del código fuente de JavaScript, pero sin cambiar la funcionalidad del programa. Incluye múltiples cosas como eliminar comentarios, semicolones y espacios en blanco. Aparte de esto, también implica el uso de funciones cortas y nombres de variables. Veamos un ejemplo antes y después de la minificación de nuestro código:

Antes de minificar:

//la función
// que registro de consola
// El primer mensaje de la persona
función FirstMessage (nombre)
consola.log ("El primer mensaje es desde:", nombre);

// ahora llame a la función
FirstMessage ("John");

Después de minificar:

función fmsg (n) consola.log ("El primer mensaje es de:", n) FirstMessage ("John");

Conclusión

Un desarrollador siempre mantiene el equilibrio entre la confiabilidad y la optimización del código. Es por esta razón que discutimos cómo acelerar la ejecución del código JavaScript en este artículo. Todos los consejos y trucos mencionados anteriormente cuando se usan juntos tendrán una mejora significativa en la velocidad del código JavaScript. Sin embargo, uno debe tener en cuenta que, aunque el rendimiento es necesario, no está por encima de detectar errores o agregar funcionalidades.