René Pacios

/* Overflow My Brain & More */

Afinaciones de rendimiento en JavaScript Parte 1 de *

javascript-guages-620x412 (Custom)Desde hace algún tiempo y con la gran acogida que ha tenido HTML5 y CSS3 para múltiples plataformas, JavaScript está adquiriendo muchísima importancia en nuestros desarrollos. Como supongo que sabréis JavaScript es un lenguaje interpretado que normalmente se ejecuta en cliente, digo normalmente porque con la aparición de NodeJs el panorama está cambiando.

Bien en esto/s ejemplos voy a centrarme en la parte de cliente, nuestros navegadores. Como os comentaba JavaScript es un lenguaje interpretado, que quiere decir esto, pues que el código de nuestros scripts es ejecutado por el motor de JavaScript que tenga nuestro cliente, el navegador en nuestros caso,  si accedemos con Chrome a una web los scripts los ejecutará V8, si accedemos con Opera pues Futhark o Carakan, son algunos ejemplos, todos ellos interpretan nuestro código JavaScript.

Los lenguajes de script de lado cliente han estado muy orientados a realizar modificaciones en el DOM de un documento HTML, validaciones antes de enviar mensajes al servidor, peticiones AJAX, es decir mejorar la experiencia de usuario en nuestras aplicaciones.

Todo esto no solía ser código muy complejo ni pesado, por lo tanto no se tenía especial consideración en el rendimiento, se hacía un código sencillo que cumpliese su objetivo, y se ejecutaba con un rendimiento aceptable dado la magnitud de los scripts y la potencia de los ordenadores frente a ese código. Sin embargo con la aparición de HTML5, los canvas, juegos online, etc. y que todo esto que también es accedido desde dispositivos móviles que soportan esta tecnología pero su hardware no posee la potencia de un ordenador de escritorio nos obliga a pensar que la calidad del código y el rendimiento no es opcional.

Parte 1 de *¿? tengo la intención de escribir sobre algunos truquillos que voy aprendiendo que nos ayudarán a optimizar nuestras aplicaciones, como estoy continuamente aprendiendo, no tengo ni idea de cuantos capítulos puede tener esta serie de artículos, simplemente serán pequeños tips que nos ayudarán a no desperdiciar ciclos de CPU ahorrando de este modo también batería a nuestro dispositivo móvil.

Bien metámonos en harina, comencemos por un ejemplo sencillo, imaginemos el siguiente código, simplemente es un bucle que recorre un array y muestra por la consola del navegador sus elementos.

  var arr = ['perro', 'casa', 'pez', 'coche'];
        for (var i = 0; i < arr.length; i++)
            console.log(arr[i]);

Este código a simple vista es normal, nada inusual, pero veis algo mejorable en este código? no? Modifiquémoslo un poco, vamos a encapsular el tope del bucle en la función "longArray":

 var arr = ['perro', 'casa', 'pez', 'coche'],
            longArray = function () {
                console.log('Obtener logitud array');
                return arr.length;
            };

        for (var i = 0; i < longArray() ; i++)
            console.log(arr[i]);

 

Si ejecutamos el código anterior la salida que veremos será similar a esta.

image

Como veis en cada iteración del bucle se evalúa si se ha llegado al tope, es decir, se accede a la longitud del array en cada iteración, ahora supongo que si veis el problema, en este código el array es de tamaño fijo, y no es necesario evaluar su longitud en cada iteración. Como podemos resolver esto? Pues muy sencillo obteniendo la longitud del array antes de la 1ª iteración del bucle.

 

 var arr = ['perro', 'casa', 'pez', 'coche'],
            longArray = function () {
                console.log('Obtener logitud array');
                return arr.length;
            };
        for (var i = 0, tope = longArray() ; i < tope ; i++)
            console.log(arr[i]);

 

Si ejecutamos ahora este código el resultado sería el siguiente

image

Como podemos observar sólo se ha accedido a la función que nos devuelve el tamaño del array la primera vez, de este modo nos ahorramos al computo de la operación de acceder al array para obtener su longitud en cada iteración del bucle, lo de utilizar una variable local lo dejo para otro post, donde trataré de hablaros del ámbito de las variables.

 

En este ejemplo se ha hecho una prueba con un vector de 4 elementos para no complicar mucho los ejemplos, y el acceso a la longitud de este en 4 iteraciones tal vez no sea un caso muy alarmante, pero imaginaros cuando tenemos un array multidimensional bastante más grande que este, o un selector de varios elementos del DOM de documentos. Como he dicho son pequeños tips, que mejoran nuestro código y nos ayudan a ir adquiriendo buenas prácticas a la hora de desarrollar.

 

Así nuestro ejemplo inicial podría quedar de la siguiente forma:

 var arr = ['perro', 'casa', 'pez', 'coche'];
        for (var i = 0, tope = arr.length ; i < tope ; i++)
            console.log(arr[i]);

 

Espero que os haya sido de utilidad, e intentaré seguir con esta serie de post que me parecen bastante interesantes.

 

Nos leemos René Pacios

Acerca de René

René Pacios es un apasionado de la tecnología, autodidacta, emprendedor, le encanta el desarrollo web, para moviles, aplicaciones, todo aquello que automatice tareas y haga que las máquinas trabajen para él. Es un gran fan de las tecnologías Microsoft, y le encanta estar a la última siempre que el tiempo se lo permite. Siempre quiso ser cantante, pero creo que en esta vida se va a quedar sólo en canta-mañanas

               

Comentarios (1) -

  • juan

    30/11/2013 21:06:17 | Responder

    Esto si esta bueno, es eficiencia de algoritmos. Es algo que usamos siempre y la verdad que miro siempre de hacer las cosas lo mejor que puedo nunca me paré a pensar ese problema concreto. Por cierto es aplicable a cualquier lenguaje. Buen aporte
    Saludos.

Agregar comentario

Loading