Optimización sencilla con Javascript

A la hora de escribir una página que use Javascript a veces nos olvidamos que después tiene que ejecutarse en todo tipo de ordenadores. Que no todo el mundo tiene un ordenador como el que estás usando. Los habrá más rápidos, pero seguro que también los habrá mucho más lentos. Por eso hay que tener en cuenta algunas optimizaciones sencillas para intentar que quien vea la página no va a tener que desesperarse mientras realiza cualquier operación.

En este tipo de aplicaciones una de las cosas que más se hace es modificar algún objeto de la página. Si se hace desde varios lugares lo primero será encapsular la modificación en una función. Para este caso voy a poner un ejemplo donde una función tiene que limpiar una columna de una tabla, tiene que pedir los nuevos datos usando JSON y escribir los datos pertinentes en dicha columna.

Después de cada ejemplo pondré los números correspondientes al tiempo de ejecución media para que os hagáis una idea del resultado.

Primera implementación:

var funcion = function ()
{
  $("#divgeneral table").find ('th').each (function (el)
  {
    $(this).next("td").html ("");
  });

  $.getJSON ("nuevosDatos.php", function (data)
  {
    $("#divgeneral table").find ('th').each (function (el)
    {
      if (data[$(this).text()] != undefined)
      {     
        $(this).next("td").text (data[$(this).text()].label)
      }
    });
  });
}

Tiempo de ejecución mínimo: 16,762 milisegundos

El primer paso será llevar el contenido de la búsqueda de las cabeceras de la tabla (en este ejemplo, la cabecera se encuentra en la izquierda y sirve de índice para referirse a cada una de ellas) a una variable.
Segunda implementación:

var funcion = function ()
{
  var columna1 = $("#divgeneral table").find ('th');
  columna1.each (function (el)
  {
    $(this).next("td").html ("");
  });

  $.getJSON ("nuevosDatos.php", function (data)
  {
    columna1.each (function (el)
    {
      if (data[$(this).text()] != undefined)
      {     
        $(this).next("td").text (data[$(this).text()].label)
      }
    });
  });
}

Tiempo de ejecución mínimo: 16,278 milisegundos

Y el siguiente paso será sacar esa variable fuera de la función y, ya dentro de ella, comprobamos si se ha inicializado:
Tercera implementación:

var columna1 = null;

var funcion = function ()
{
  if (columna1 == null)
  columna1 = $("#divgeneral table").find ('th');

  columna1.each (function (el)
  {
    $(this).next("td").html ("");
  });

  $.getJSON ("nuevosDatos.php", function (data)
  {
    columna1.each (function (el)
    {
      if (data[$(this).text()] != undefined)
      {     
        $(this).next("td").text (data[$(this).text()].label)
      }
    });
  });
}

Tiempo de ejecución mínimo: 16,509 milisegundos

Entre la primera y la tercera implementación hay 0,253 milisegundos de diferencia. Parece poca cosa. Pero en una función que se ejecuta varios cientos o miles de veces un cambio tan sencillo ¿ no merece la pena ?