Cómo acelerar su código JavaScript.
Reducir la actividad en bucles
Los bucles se utilizan a menudo en programación.
Cada instrucción en un bucle, incluida la instrucción for, se ejecuta para cada iteración del bucle.
Las declaraciones o asignaciones que se pueden colocar fuera del bucle harán que el bucle se ejecute más rápido.
Mala práctica:
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 bucle y hace que el bucle se ejecute más rápido.
Reducir el acceso al DOM
El acceso al DOM HTML es muy lento, en comparación con otras declaraciones de JavaScript.
Si necesitas 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 el tamaño del DOM
Mantenga pequeña la cantidad de elementos en el DOM HTML.
Esto siempre mejorará la carga de la página y acelerará la representación (visualización de la página), especialmente en dispositivos más pequeños.
Cada intento de buscar en 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 puedes reemplazar código como este:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Con esto:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Retrasar la carga de JavaScript
Poner los scripts en la parte inferior del body 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 utilizar defer="true" en la etiqueta del script. El atributo defer especifica que el script debe ejecutarse después de que la página haya terminado de analizarse, pero solo funciona para scripts externos.
Si es posible, puede agregar su secuencia de comandos a la página mediante 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 with
Evite utilizar la palabra clave with. Tiene un efecto negativo sobre la velocidad. También satura los ámbitos de JavaScript.
La palabra clave with no está permitida en modo estricto.
W3Schools es el sitio de desarrolladores web más grande del mundo.