Rendimiento de JavaScript

Cómo acelerar tu código de JavaScript.

Reducir la actividad dentro del bucle

El bucle se utiliza a menudo en la programación.

Cada vez que itere el bucle, cada instrucción en el bucle, incluyendo for instrucciones, se ejecutarán.

Las instrucciones o asignaciones que puedan colocarse fuera del bucle harán que el bucle se ejecute más rápido.

Mal código:

var i;
for (i = 0; i < arr.length; i++) {

Mejor código:

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

El mal código accede al array length propiedades.

El buen código accede al bucle length propiedades, para que el bucle sea más rápido.

Reducir el acceso al DOM

El acceso al HTML DOM es muy lento en comparación con otros JavaScript.

Si esperas acceder a un elemento DOM varias veces, accede una vez y úsalo como variable local:

Ejemplo

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

Prueba personalmente

Reducir el tamaño del DOM

Intenta mantener una menor cantidad de elementos en el HTML DOM.

Esto siempre mejorará la carga de la página y acelerará la renderización (apariencia de la página), especialmente en dispositivos más pequeños.

Cada vez que intentes buscar el DOM (por ejemplo getElementsByTagName）se beneficiarán de un DOM más pequeño.

Evita variables innecesarias

No crees nuevas variables que no planees almacenar valores.

Generalmente puedes reemplazar el código:

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

Usa este código:

document.getElementById("demo").innerHTML = firstName + " " + lastName

Retrasar la carga de JavaScript

Coloque el script en la parte inferior de la página para que el navegador cargue primero la página.

Cuando se descarga el script, el navegador no iniciará ninguna otra descarga. Además, todas las actividades de análisis y renderizado pueden bloquearse.

La especificación HTTP define que el navegador no debe descargar en paralelo más de dos tipos de elementos.

Una opción es usar en la etiqueta script defer="true"La propiedad defer especifica que el script debe ejecutarse después de que la página se haya completado la parseo, pero solo se aplica a scripts externos.

Si es posible, puede agregar scripts a la página a través de código después de que la página se haya cargado:

Ejemplo

<script>
window.onload = downScripts;
function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

Evite el uso de with

Evite su uso with Palabra clave. Tiene un impacto negativo en la velocidad. También puede confundir el ámbito de JavaScript.

En modo estrictoNo permitido Palabra clave with.