jueves, 5 de enero de 2012

JavaScript: Cómo escribir código eficaz


Las aplicaciones web de la actualidad contienen grandes cantidades de código JavasScript. Así pues, el rendimiento no es solamente una cuestión del tiempo que la página tarde en cargar, sino también de cómo responde a medida que se utiliza. La mejor manera de garantizarlo es escribiendo código JavaScript lo más eficiente posible para todos los navegadores.

utilice variables locales
Las variables locales son los identificadores de lectura y escritura más rápida en JavaScript.
un ejemplo:

          function createChildFor(elementId){
                    var element = document.getElementById(elementId),
                    new Element = document.createElement ("div");
                    element.appendChild(newElement);
          }

Esta función contiene dos referencias a la variable global document. Dado que document se utiliza en
más de una ocasión, debería almacenarse en una variable local para que la referencia sea más rápida

          function createChildFor(elementId){
                    var doc = document,
                    element = doc.getElementById(elementId),
                    new Element = doc.createElement ("div");
                    element.appendChild(newElement);
          }

La versión reescrita de la función almacena document en una variable local llamada doc. Dado que doc existe en la primera parte de la cadena, puede resolverse con mayor rapidez que document.

Debemos almacenar los valores a los que se accede con frecuencia en una variable local.

          function process(data){
                    if(data.count > 0){
                              for (var i=0; i< data.count; i++){
                                        processData(data.item[i]);
                              }
                    }
          }

de la siguiente forma:

          function process(data){
                    var count = data.count;
                    if(count > 0){
                              for (var i=0; i< count; i++){
                                        processData(data.item[i]);
                              }
                    }
          }


Los condicionales más rápidos
utilice IF:
-Cuando no existan más de dos valores diferenciados que comprobar.
-Cuando exista un gran número de valores de puedan separarse fácilmente en rangos.

utilice SWICHT:
-Cuando haya más de dos pero menos de diez valores diferenciados que comprobar.
-Cuando no haya rangos para las condiciones porque los valores sean no lineales.

utilice ARRAYS:
-Cuando existen más de 10 valores que comprobar.
-Cuando los resultados de las condiciones sean valores únicos, en lugar de un número de acciones que deban emprenderse.


Bucles rápidos
Existen cuatro tipos de bucle diferentes en JavaScript. FOR, DO-WHILE, WHILE y el cuarto FOR-IN. Este ultimo cuyo propósito es el de iterar por las propiedades enumerables de un objeto de JavaScript.
Naturalmente solo funciona cuando conocemos las propiedades del objeto.

SIN OPTIMIZAR:
          var values=[1,2,3,4,5];
//FOR
          for (var i=0; i<values.length;i++){
                    process(values[i]);
          }
//DO-WHILE
          var j=0;
          do {
                    process(values[j++]);
          }while (j < values.length);
//WHILE
          var k=0;
          while (k < values.length){
                    process (values[k++]);
          }



OPTIMIZADO 1/2;
          var values=[1,2,3,4,5];
          var length = values.length;
//FOR
          for (var i=0; i<length;i++){
                    process(values[i]);
          }
//DO-WHILE
          var j=0;
          do {
                    process(values[j++]);
          }while (j < length);
//WHILE
          var k=0;
          while (k < length){
                    process (values[k++]);
          }

Otra vía sencilla para mejorar el rendimiento de un bucle consiste en reducir el iterador hacia un valor 0 en lugar de incrementarlo hacia la longitud total. Este sencillo cambio puede dar como resultado un ahorro del 50 por 100 sobre el tiempo de ejecución original, dependiendo de la complejidad de cada iteración.

OPTIMIZADO 2/2:
          var values=[1,2,3,4,5];
          var length = values.length;
//FOR
          for (var i=length;i--;){
                    process(values[i]);
          }
//DO-WHILE
          var j=length;
          do {
                    process(values[--j]);
          }while (j);
//WHILE
          var k=length;
          while (k--){
                    process (values[k]);
          }

Un saludo a todos los lectores ;)

5 comentarios:

  1. ¿fuentes? ¿de dónde has sacado la información?

    ResponderEliminar
  2. Has hecho pruebas de rendimiento?

    ResponderEliminar
  3. Está muy interesante, pero me parece que en ejemplo de optimización 1/2 con DO-WHILE fallaria, es decir, inicializa j a la longitud del array y después opera con el elemento j, j + 1, j + 2 (además el bucle no acabaría nunca).

    Por lo demás está muy bien, habrá que tenerlo en cuenta :P

    ResponderEliminar
  4. Muchas gracias kenkeiras tienes razón. El do-while nunca acabaría lo corrijo ahora mismo.

    Sobre las pruebas de rendimiento, podéis probarlo vosotros mismos. En un bucle pequeño no se percibe pero en procesos más costosos la diferencia de tiempos se puede notar claramente.

    ResponderEliminar