Cómo acelerar su código JavaScript.
Los bucles se utilizan a menudo en programación.
Cada declaración en un bucle, incluida la declaració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 El bucle se ejecuta más rápido.
for (let i = 0; i < arr.length; i++) {
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 ejecuta el bucle. iterado.
El mejor código accede a la propiedad de longitud fuera del bucle y realiza la El bucle se ejecuta más rápido.
El acceso al DOM 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 use como una variable local:
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Performance</h2>
<p>If you expect to access a DOM element several times, access it once, and the use it as a local variable:</p>
<p id="demo"></p>
<script>
const obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>
</body>
</html>
Mantenga pequeña la cantidad de elementos en el DOM HTML.
esto siempre será mejore la carga de páginas y acelere la representación (visualización de páginas), especialmente en dispositivos más pequeños.
Cada intento de buscar en el DOM (como getElementsByTagName) será beneficioso desde un DOM más pequeño.
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 este:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Poner sus scripts en la parte inferior del cuerpo de la página permite que el navegador cargue el página primero.
Mientras se descarga un script, el navegador no iniciará ningún otro descargas. 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 El atributo defer especifica que el script debe ejecutarse después de que la página haya sido Terminé el análisis, 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:
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Evite el uso de la palabra clave with
. Tiene un efecto negativo sobre velocidad. También satura los ámbitos de JavaScript.
La palabra clave with
no está permitida en modo estricto.