Sin duda cada vez más JavaScript se ha convertido en u lenguaje de programación en el cliente que permite mucha interactividad con los servidores y con los elementos DOM del sitio web.

Aunque JavaScript cada vez más está integrado con el lenguaje HTML, bien es cierto que existen muchas técnicas para mejorar la velocidad de procesamiento del código.

OPTIMIZACIÓN GENERAL PARA JAVASCRIPT
Categoría: JavaScript

JavaScript, como cualquier otro lenguaje de programación, tiene sus cosas buenas y malas, pero sobre todo, al ser un lenguaje que se puede interpretar y que se ejecuta en el navegador cliente, vale la pena aplicar una serie de reglas básicas.

• Evitar las variables globales es una idea bastante buena ya que el rendimiento de dichas variables es bastante bajo. En el caso de ejecutar varios códigos es probable que se sobrescriban dichas variables. Para ello podríamos tener elementos de este estilo que se protegen de accesos externos o la posibilidad de ser sobrescritos.

  
miNameSpace = function() {
  var current = null;
  function init() {...}
  function change() {...}
  return {
    init:init,
    set:change
  }
}();


• Otro detalle importante es el uso de un código lo más estricto posible, es decir, un código que se ajuste a cualquier motor que interprete JavaScript y sea fácilmente interpretable. Para verificar que estamos usando un código correcto podemos hacer uso de herramientas como JSLint.
• Es mejor no cambiar valores por defecto del DOM en los valores de los elementos (sobre todo en aquellos que hacen referencia a los estilos), sino modificarlos haciendo cambios en clases que se aplican a dichos elementos. Por ejemplo, podemos aplicar unos cambios tales que:

  
inputs.style.borderColor = '#f00';
inputs.style.borderStyle = 'solid';
inputs.style.borderWidth = '1px';


  O podemos hacer un cambio más sencillo, tal que este:

  
inputs.className += ' error';


  Y que esta clase “error” sea la que haga el cambio en el estilo, sin modificar directamente los elementos.

• Es mejor utilizar la anotación corta para crear objetos o arrays. De esta forma, un objeto tal que este:

  
var perro = new Object();
perro.color = 'negro';
perro.tamano = 'grande';
Podría crearse mucho más eficiente así:
var perro = {
  color: 'negro',
  tamano = 'grande'
};


  Con un array pasaría lo mismo. Si tenemos algo así:

  
var series = new Array();
series[0] = 'Fringe';
series[1] = 'The Big Bang Theory';
Sería mucho más eficiente creándose así:
var series = [
  'Fringe',
  'The Big Bang Theory'
];


• Otra forma de optimizar código puede ser reduciendo los condicionales. De esta forma un condicional habitual tal que:

  
var direccion;
if(x > 10) {
  direccion = 1;
} else {
  direccion = -1;
}


  Podría llegar a reducirse a un código tal que:

  
var direccion = (x > 100) ? 1 : -1;


• Otra acción sencilla que permite mejorar el rendimiento es el de optimizar los bucles. Un bucle habitual podría ser este:

  
var beatles = ['George','Ringo','Paul','John'];
for(var i=0;i< beatles.length;i++){
  Actuan(beatles[i]);
}


  Tendría una opción mejorada tal que así, creando las variables sólo una vez:

  
var beatles = ['George','Ringo','Paul','John'];
for(var i=0, j= beatles.length;i   Actuan(beatles[i]);
}


OPTIMIZACIÓN PARA JQUERY
Categoría: JavaScript

jQuery es una biblioteca de funciones preestablecidas de JavaScript que permite interactuar de forma más sencilla con los elementos DOM de una página, además de conseguir trabajar de una forma más sencilla gracias a las ampliaciones de código que existen.

Existen algunas reglas que permiten trabajar de forma más rápida y mejorada con jQuery:

• La forma más rápida de acceder a un elemento del DOM es hacerlo mediante un selector ID en vez de hacerlo con un descendiente suyo. Esto es debido a la existencia y uso de la función getElementById(). Esto significa que es mucho más óptimo hacer uso de algo así:

  
var boton1 = $('#boton1');
que no hacer uso de algo así:
var boton1 = $('#botones .boton1');


• La siguiente forma de acceder rápidamente a un elemento es hacerlo a través de un “tag” ya que se aprovecha el uso de la función getElementsByTagName().
• Otro detalle a tener en cuenta es el uso de variables para almacenar información de un elemento y no aplicar cambios directamente sobre él. De esta forma tendríamos una función optimizada tal que así:

  
var $activar = $('#light input.on');
$activar.css('border', '3px dashed yellow');
$activar.css('background-color', 'orange');
$activar.fadeIn('slow');


  Sobre unas no optimizadas que podrían ser así:

  
$('#light input.on).css('border', '3px dashed yellow');
$('#light input.on).css('background-color', 'orange');
$('#light input.on).fadeIn('slow');


  Este sistema podría mejorar incluso un poco más haciendo uso de encadenamiento:

  
var $activar = $('#light input.on');
$activar.css('border', '3px dashed yellow').css('background-color', 'orange').fadeIn('slow');


• Otra forma de acceder rápidamente a subelementos es utilizar la función find().

  
var $activar = $('#light'), $activo = $activar.find('input.on'), $inactivo = $activar.find('input.off');


• Los eventos son uno de los elementos que más se utilizan en jQuery y debemos aprovechar la delegación de los mismos para generar el llamado Bubbling. Por ejemplo podemos tener una función sencilla como:

  
$('#lista li).bind('click', function() {
$(this).addClass('clicked');
});


  Esto implica tener que trabajar enormemente con el DOM, algo que podríamos reducir utilizando una función algo más compleja aparentemente, pero más efectiva:

  
$('#lista).bind('click', function(e) {
var pulsa = e. pulsa, $ pulsa = $( pulsa);
if (pulsa.nodeName === 'LI') {
$ pulsa.addClass('clicked');
}
});


• Cargar las funciones tras la carga de la ventana y no del estado del documento. Por norma general las funciones se cargan tras el $(document).ready pero se pueden cargar de una forma más eficiente con $(window).load.