Nesse post abordaremos algumas novas boas práticas e técnicas para se escrever jQuery de alta performace. O primeiro post dessa série aborda as 6 primeiras práticas.

7. Alavanque a Delegação de Eventos

Mesmo que digam o contrário, todo evento (ex. blur, focus, click, etc.) é anexado ao elemento pai no DOM. Isso nos ajuda bastante quando queremos que todo elemento filho chame a mesma função.

Ao invez de adicionar a função no evento desejado de todos os elementos filhos, você pode adicionar sua funcionalidade, apenas uma vez, ao seu elemento Pai.

Por exemplo, digamos que estamos escrevendo um formulário grande com múltiplos inputs e queremos manipular uma classe quando selecionado/descelecionado.

Anexar o evento dessa forma seria ineficiente:

	$("#formulario input").bind("focus",function(){
		$(this).addClass("selecionado");
	}).bind("blur",function(){
		$(this).removeClass("selecionado");
	});

Ao invez disso, podemos definir os eventos no nível do elemento Pai. Dessa forma:

	$("#formulario").bind("focus",function(e){
		$(e.target).addClass("selecionado");
	}).bind("blur",function(e){
		$(e.target).removeClass("selecionado");
	});

Assim, o encadeamento do elemento Pai atua como um gatilho e fará seu trabalho baseado no elemento alvo do evento selecionado.

Caso esteja adicionando um observador de evento para múltiplos elementos, cuidado, provavelmente está fazendo algo errado (e consideravelmente lento).

8. Elimine Desperdícios de Queries

Uma vez que o jQuery falha ao encontrar um elemento na página, um tempo considerável foi gasto sem necessidade. Caso tenha um único arquivos JavaScript para todo seu site, pode ser tentador atribuir suas funções jQuery ao $(document).ready(function(){ // código javascript/jquery });

Jamais faça isso. Jamais!

Seja rigoroso em apenas executar funções que sejam aplicadas a página atual. A maneira mais eficiente de fazer isso é criar/utilizar funções de inicialização inline. Assim terá controle total sobre quando e onde seu JavaScript deve ser executado.

Por exemplo, na página template do seu Index, você deverá ter o seguinte código antes do fechamento do seu body:

<script type="text/javascript">
	minhalib.index.init();
</script>

Caso o template da sua página tenha N variedades de módulos que devam ou não devam estar disponíveis na página ou caso precisem ser inicializados rapidamente, pode inserir o código inline imediatamente após o módulo dejseado.

Sua biblioteca JavaScript global deve se parecer assim:

var minhalib = {

		index :
		{
				init : function()
				{
					// code
				},

				acao : function()
				{
					// code
				}
		},

		artigo :
		{
				init : function()
				{
					// code
				},

				acao : function()
				{
					// code
				}
		}

};

9. Quando usar Document.ready e Window.load

Existe uma tendência dos desenvolvedores jQuery de incluir tudo dentro do pseudo-evento $(document).ready. Isso é usado na maioria dos exemplos que irá encontrar.

Apesar do $(document).ready ser muito eficiente, nem sempre é a melhor alternativa. Ele ocorre durante a renderização da página, enquanto os objetos ainda estão em download. Se você notar que sua página está lenta durante o carregamento, as funções chamadas no $(document).ready podem ser a resposta.

	$(document).ready(function(){
		// funções jQuery que serão iniciadas antes do carregamento total da página
	});

Em alguns casos, porém, é possível reduzir a utilização da CPU durante o tempo de carregamento ao usarmos o $(window).load para executar algumas de nossas funções. Isso porque esse evento somente ocorre quando todos os objetos chamados pelo HTML (includino iframes) forem baixados.

	$(window).load(function(){
		// funções jQuery que serão iniciadas depois do carregamento total da página
	});

Funcionalidades supérfluas, como drag and drop, efeitos visuais, animações, pré-carregamento de imagens, etc., são ótimos candidatos para esse tipo de abordagem.

10. Comprima seu JavaScript e leia a Biblioteca

Apesar disso não estar diretamente ligado a programação jQuery de alta performace, é fundamental. Nós programadores, precisamos manter os nomes de funções e variáveis descritivos para facilitar nosso trabalho, mas isso é irrelevante para o usuário.

Sendo assim, podemos comprimir nossos arquivos a fim de diminuir seu tamanho e aumentar sua velocidade de download e processamento antes de entrarem em produção. Para isso, passe o código em uma ferramenta de compressão.

Para isso, use o YUI Compressor, que diminui consideravelmente seus arquivos ao excluir bytes desnecessários do código sem penalidade para o CPU (como o Base62 encode Packer).

E para a leitura da biblioteca, recomendo o jQuery Docs e o jQuery Cheat Sheet. Lembre-se que sempre que se repetir, provavelmente haverá uma maneira mais fácil (e eficiente) de realizar a tarefa.