Herramientas para desarrolladores : Cursos, manuales y guías de referencia : Cursos : JavaScript avanzado :
Formas de mejorar el rendimiento de un script
- Introducción
- Salida de un bucle
- Cachear objetos
- Cachear los scripts
- Coste de ejecución en JavaScript
1. Introducción
Aunque cada día nos econtramos con ordenadores más potentes, y navegadores que aprovechan mejor las capacidades de nuestro hardware, sin desaprovechar recursos tan preciados como la memoria, no debemos olvidar nunca el rendimiento de nuestros scripts.
Cuando hablamos aquí de rendimiento nos referimos a la capacidad que tiene nuestro código de ejecutarse de forma eficiente, consumiendo el mínimo de recursos hardware (memoria) y software (recursos del navegador), y evitandole al usuario de la página web esperas innecesarias.
El problema del rendimiento de un script se agraba cuando el usuario no dispone de un ordenador último modelo. Si probáramos nuestros programas en PCs con viejos procesadores Intel 486, por ejemplo, notaríamos la diferencia entre un código eficiente y un código mal diseñado.
Por ello no está de menos dedicarle unos minutos a repasar cómo podemos acelerar la ejecución de nuestros scripts.
2. Salida de un bucle
En JavaScript, al igual que en la mayoría de los lenguajes de programación, hay diferentes formas de crear bucles: el conocido bucle for, el while y el do ... while. La elección entre uno u otro tipo de bucle puede afectar al rendimiento de nuestro código.
En general, el bucle for debe utilizarse sólo cuando se conoce de antemano el número exacto de iteraciones que queremos realizar. Aunque parece una regla sencilla, en muchos casos no es observada, y nos encontramos con codificaciones como la del ejemplo siguiente:
condicion = false
for( n=0; n<miArray.length; n++) {
if( miArray[n] == dato )
condicion = true
}
Si el objeto del bucle es verificar la existencia del valor contenido en la variable dato en alguno de los elementos del array miArray, la codificación anterior es ineficiente, ya que encontrado un elemento que cumple la condición, se continua comparando con el resto de elementos, hasta el final del array.
Si se desea utilizar un bucle for, se hace necesario forzar la salida del bucle, para evitar ejecutar iteraciones innecesarias. Esto se hace utilizando la sentencia break. Así, una versión más eficiente del código anterior sería:
condicion = false
for( n=0; n<miArray.length; n++) {
if( miArray[n] == dato ) {
condicion = true
break
}
}
3. Cachear objetos
Durante la ejecución del código de un script existen ciertas sentencias que consumen más tiempo que sentencias equivalentes. El ejemplo más claro es el acceso a elementos de un objeto de la página HTML. Por ejemplo, pongamos que tenemos que reasignar el índice del elemento seleccionado de una lista desplegable:
document.miFormulario.miLista.selectedIndex = 0
A priori, no parece que esta sentencia vaya a requerir mucho tiempo de ejecución. Sin embargo, supongamos que esta misma sentencia está en el interior de un bucle que se repite... 1000 veces:
for (n = 0; n < 1000; n++) {
...
document.miFormulario.miLista.selectedIndex = n
...
}
Ahora, el esfuerzo se ha multiplicado por 1000. La codificación anterior no es eficiente, ya que el acceso al objeto document.miFormulario.miLista se reptie 1000 veces. Las llamadas repetidas a objetos de la página pueden ralentizar la ejecución del script, consumiendo excesiva cantidad de memoria. La solución: cachear el objeto.
Cachear el objeto es almacenarlo dentro de una variable. Si usamos esta variable en lugar de referencias directas al objeto, conseguirmos un ahorro substancial de tiempo de ejecución. Veamos el ejemplo anterior, acelerado:
var lista = document.miFormulario.miLista
for (n = 0; n < 1000; n++) {
...
lista.selectedIndex = n;
...
}
Es conveniente cachear objetos cuando se accede a elementos de objetos cuya estructura jerárquica es muy profunda, como el document.all del Internet Explorer.
4. Cachear los scripts
Aunque esto no acelera la ejecución del scrpt propiamente dicha, sí acelera la carga de la página. Se trata de incluir el código del script en un fichero externo en vez de en la propia página. Este fichero, de extensión .js, se enlaza desde la sección de cabecera de la página, de la siguiente forma.
<script language="javascript" src="miScript.js"></script>
Cuando el código está en un fichero .js, el navegador lo almacena en la memoria caché, de manera que en sucesivas recargas de la página el script en su totalidad es obtenido de esta memoria, y no de Internet. Esto acelera la carga de la página. Si el script es utilizado en múltiples páginas, se cargará sólo una vez (y no con cada página).
Incluir el código JavaScript en ficheros externos es recomendable no sólo por la aceleración que supone en la carga de las páginas, sino también porque facilita el mantenimiento del site.
5. Coste de ejecución en JavaScript
Determinadas sentencias en JavaScript tienen un alto coste de ejecución, es decir, repercuten seriamente en el rendimiento del programa. Aunque no es fácil conocer qué sentencias se ejecutan rápido y cuales requieren más recursos, la realización de pruebas con diferentes codificaciones nos puede ayudar.
Por ejemplo, para acceder al contenido de un objeto párrafo, podemos usar estas dos codificaciones:
miParrafo.innerText miParrafo.innerHTML
Mediante los dos objetos tenemos acceso al texto del párrafo. El segundo nos posibilita también acceder a otros objetos. Ahora bien, si sólo queremos acceder al texto del párrafo (por ejemplo, para modificarlo), debemos utilizar la primera opción, ya que demanda muchos menos recursos que el acceso al objeto innerHTML.
