Optimización para jQuery

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 ó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 estos 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.