Rendimiento de JavaScript
Cómo acelerar tu código JavaScript.
Reducir la actividad en bucles
Los bucles se utilizan a menudo en la programación.
Cada instrucción en un ciclo, incluida la instrucción for, se ejecuta para cada iteración del ciclo.
Las declaraciones o asignaciones que se pueden colocar fuera del ciclo harán que el ciclo se ejecute más rápido.
Malo:
for (let i = 0; i < arr.length; i++) {
Mejor código:
let l = arr.length;
for (let i = 0; i < l; i++) {
El código incorrecto accede a la propiedad de longitud de una matriz cada vez que se itera el bucle.
El mejor código accede a la propiedad de longitud fuera del ciclo y hace que el ciclo se ejecute más rápido.
Reducir el acceso DOM
El acceso al DOM de HTML es muy lento, en comparación con otras declaraciones de JavaScript.
Si espera acceder a un elemento DOM varias veces, acceda a él una vez y utilícelo como una variable local:
Ejemplo
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Reducir tamaño DOM
Mantenga pequeña la cantidad de elementos en el HTML DOM.
Esto siempre mejorará la carga de la página y acelerará el procesamiento (visualización de la página), especialmente en dispositivos más pequeños.
Cada intento de buscar el DOM (como getElementsByTagName) se beneficiará de un DOM más pequeño.
Evite variables innecesarias
No cree nuevas variables si no planea guardar valores.
A menudo puede reemplazar un código como este:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Con este:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Retrasar la carga de JavaScript
Poner sus scripts en la parte inferior del cuerpo de la página permite que el navegador cargue la página primero.
Mientras se descarga un script, el navegador no iniciará ninguna otra descarga. Además, es posible que se bloqueen todas las actividades de análisis y representación.
La especificación HTTP define que los navegadores no deben descargar más de dos componentes en paralelo.
Una alternativa es usar defer="true"en la etiqueta del script. El atributo defer especifica que la secuencia de comandos debe ejecutarse después de que la página haya terminado de analizarse, pero solo funciona para secuencias de comandos externas.
Si es posible, puede agregar su secuencia de comandos a la página por código, después de que la página se haya cargado:
Ejemplo
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Evite usar con
Evite el uso de la withpalabra clave. Tiene un efecto negativo en la velocidad. También abarrota los ámbitos de JavaScript.
La withpalabra clave no está permitida en modo estricto.