O jQuery revolucionou a forma como escrevemos JavaScript. Quando usado corretamente, pode tornar seu site mais interativo, interessante e agradável. Para isso, é necessário que respeite algumas regras e boas práticas ao escrever seus códigos.

1# Sempre comece com um ID

O seletor mais rápido do jQuery é o seletor de ID, $("#elemento_id"). Isso ocorre justamente porque esse método aponta para uma função nativa do JavaScript, o getElementById().

Selecionando um único elemento

Selecionar um único elemento no jQuery, quando se tratando de IDs, deve sempre ser feito da maneira mais direta possível. Por exemplo, no documento:

	<div id="sidebar">
		<ul id="menu">
			<li>Opção1</li>
			<li id="opcao2">Opção2</li>
			<li><span>Opção3</span></li>
		</ul>
	</div>

Essa seria uma forma de selecionar nosso elemento de forma lenta:

	var elemento = $("#sidebar #opcao2");

Ao invez disso, como todo ID deve ser único, selecione o elemento diretamente:

	var elemento = $("#opcao2");

Selecionando múltiplos elementos

Primeiramente, a seleção de múltiplos elementos deve sempre ser evitada ao máximo. Trata-se de análise de DOM e loops, o quê é consideravelmente lento.

Para amenizar a baixa performace, sempre derive do ID parente mais próximo:

	var elemento = $("#menu span");

2# Prefira as Tags ao invez das Classes

O segundo seletor mais rápido do jQuery é o seletor de Tags, $("span"). Novamente, isso é porque esse método também aponta para um método nativo do JavaScript, o getElementByTagName().

	<div id="conteudo">
		<form action="?action" method="post" id="form">
			<input type="submit" name="submit" value="submit" class="on">
		</form>
	</div>

Sempre que possível, preceda uma classe por sua tag, também lembre-se de derivar de um ID:

	var elemento = $("#form input.on");

3# Cacheie Objetos jQuery

Um dos grandes fortes do jQuery é a análise do DOM. Mas isso é custoso para performace. Sendo assim, tente minimizar a análise de DOM ao máximo cacheando objetos. Nunca faça isso:

	$("#form input.on").fadeOut("slow");
	$("#form input.on").css('color','white');
	$("#form input.on").bind('click', function(){...});
	$("#form input.on").fadeIn("slow");

Ao invez disso, sempre que for reutilizar um mesmo objeto jQuery, armazene-o em uma variável e utilize-o através dela. Por exemplo, essa seria a forma correta de implementar o código acima:

	var $button_on = $("#form input.on");
	$button_on.fadeOut("slow");
	$button_on.css("color","#ffffff");
	$button_on.bind("click", function(){...});
	$button_on.fadeIn("slow");

Dica: nomeie variáveis de objetos jQuery com $ no início. Isso facilitará sua posterior identificação.

Lembre-se, jamais repita a seleção de um mesmo elemento em sua aplicação.

4# Aproveite o Poder do Encadeamento

O jQuery nos permite encadear seu código através de seus objetos. Isso nos permite escrever menos código e aumenta a performance do nosso script visto que estaremos utilizando o mesmo objeto:

	$("#form input.on").fadeOut("slow").css("color","#ffffff").bind("click", function(){...}).fadeIn("slow");

Consequentemente, nosso JavaScript ficará mais leve.

5# Use Sub-queries

O jQuery nos permite realizar seleções adicionais em código já selecionado. Isso reduz a perda de performance visto que o objeto pai já foi encontrado e armazenado em variável local.

	<div id="conteudo">
		<form action="?action" method="post" id="form">
			<input type="submit" name="submit" value="submit" class="on">
			<input type="reset" name="submit" value="submit" class="off">
		</form>
	</div>

Por exemplo, usaremos sub-queries para selecionar o botões de classe on e off e iremos cacheá-los para uma futura manipulação.

	var $form = $("#form"),
		$button_on = $form.find("input.on"),
		$button_off = $form.find("input.off");

Dica: declarando múltiplas variáveis globais separando-as com vírgulas, salvamos o uso de alguns bytes adicionais.

6# Reduza manipulação de DOM

O objetivo aqui é reduzir o gasto excessivo de performance na manipulação desordenada do DOM. Como sabemos, essa manipulação é lenta e prejudicial quando realizada de forma errada. Para isso, procure armazenar tudo que precisa em memória e somente depois atualize o DOM.

Por exemplo, caso precise criar uma lista dinamicamente, não faça isto:

	var list_array = [...]; // array com 100 posições
	$minha_lista = $("#minha_lista");
	for ( i in list_array )
	{
		$minha_lista.append("<li>" + list_array[i] + "</li>");
	}

Ao invez disso, armazene todas as modificações a serem feitas na lista em memória e realize apenas uma única atualização do DOM. Dessa forma:

	var lista_array = [...]; // array com 100 posições
	lista_dom = null;

	for ( i in lista_array )
	{
		lista_dom += "<li>" + list_array[i] + "</li>";
	}

	$("#minha_lista").append( lista_dom );

Conclusão & Continuação

Mais 5 dicas para aumento de performance de códigos jQuery serão dadas no próximo post da série. Tenha um bom jQuery.