Vamos a ver como mejorar el rendimiento en JavaScript, para ello utilizar algunos trucos con el fin de que a la hora de realizar scripts más complejos no perdamos velocidad…

Reducir la actividad en los bucles

Cada vez que se ejecuta un bucle este se ejecuta de forma completa, incluyendo claro esta la condición de modo que debemos de hacer que estas ejecuciones sean lo más rápidas posibles, para ello podemos suponer el siguiente ejemplo:

//bajo rendimiento
for (i = 0; i < arr.length; i++) {
    //código
}
//alto rendimiento
l = arr.length;
for (i = 0; i < l; i++) {
    //código
}

Vemos que para realizar el bucle con alto rendimiento primero guardamos la longitud del array en una variable, de ese modo no se tiene que acceder a la matriz en cada vuelta, acelerando el proceso.

Reducir el acceso al DOM

El acceso al DOM es una de las cualidades, ami parecer, más utilizadas en JS, pero también es una de las que más ralentizan su actividad, por lo que lo ideal es guardar nuestro acceso al DOM en una variable si vamos a acceder en diferentes ocasiones a él, tal y como vemos a continuación:

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

Reducir el DOM

Otra forma de hacer que nuestra página cargue más rápido es utilizando un DOM más pequeño de este modo también se accede a sus elementos a mayor velocidad y se renderiza el documento antes.

Evitar variables innecesarias

El utilizar variables hace que ocupemos espacios de memoria, de modo que solo debemos de guardar en ellas aquella información que realmente vamos a utilizar varias veces o a modificar en el proceso de ejecución del script.

Debemos de evitar utilizar variables innecesarias siempre que podamos como en el siguiente script:

//Evitar hacer esto
var nombreCompleto = nombre + " " + apellidos;
document.getElementById("demo").innerHTML = nombreCompleto;
//pudiendo hacer esto
document.getElementById("demo").innerHTML = nombre + " " + apellidos;

Poner los scripts al final del documento

Poniendo los scripts justo antes de la etiqueta de cierre del body lograremos hacer que se carguen una vez haya terminado el documento html, ya que la especificación HTTP define que los navegadores no deben descargar más de dos componentes en paralelo.

De este modo evitamos que toda la actividad de análisis y representación pueda ser bloqueada.