Olá pessoal!

Quase sempre que vamos programar, seja em qualquer linguagem, o ideal é otimizarmos ao máximo o código, mesmo que possa vir a trazer mais trabalho escrevendo, isso mesmo!

No mundo JQuery os seletores são tão importantes quanto o protocolo IP para redes, neste tópico eu irei passar os (poucos) conhecimentos que obtive ao longo de pouco mais de tres meses de estudo!

---

---

Vamos entender a importância de passarmos contexto aos seletores JQuery

Quando fazemos uso dos seletores e não passamos nenhum contexto ele refaz o método utilizando o "document object" como contexto da seleção, exemplo:

Código:

jQuery('div.PunBBForumeiros').doSomething();

O código acima vai identificar o seletor, mas vai chamar uma função interna do jQuery equivalente a:

Código:

jQuery(document).find('div.PunBBForumeiros').doSomething();

De "cara" percebemos que a linha de código do primeiro exemplo será transformada na linha do exemplo posterior!!!
Nesse caso, podemos salvar uma cópia do "document object" em uma variável e com isso economizar alguns milisegundos que seriam gastos com uma chamada a mais cada vez que selecionarmos novos elementos.

Exemplos:

Código:


// Modo mais utilizado que vai chamar o objeto como contexto:
jQuery('div.PunBBForumeiros').doSomething();
   
// Modo otimizado onde já armazenamos o contexto e o passamos automaticamente:
jQuery.root = jQuery( document );
jQuery.root.find('div.PunBBForumeiros').doSomething();


Agora iremos dar um "gás' a mais na performance:
Ao invés de usar:

Código:

jQuery('div.PunBBForumeiros', contexto);

Prefira:

Código:

jQuery(contexto).find('div.PunBBForumeiros');

.find()??? Isso mesmo, vai economizar mais uma chamada que o JQuery teria que fazer!

O código:

Código:

$('.myClass');

É mais lento do que:

Código:

$('div.myClass');

Isso porque há um aumento de performance se você especificar o tipo de elemento!

Armazene o length em loops!
Em um loop, não acesse a propriedade length de um array todo tempo; armazene-o em outra variável antes
de manipula-lo..

Código:


var myLength = myArray.length;
for (var i = 0; i < myLength; i++) {
// faz alguma coisa
}


Adicione novo conteúdo fora de um loop!
Tocar o DOM tem um custo; se você estiver adicionando muitos elementos ao DOM, faça tudo de uma
vez, não um de cada vez.

Código:


// isto é ruim
$.each(myArray, function(i, item) {
var newListItem = '<li>' + item + '</li>';
$('#ballers').append(newListItem);
});
// melhor: faça isso
var frag = document.createDocumentFragment();
$.each(myArray, function(i, item) {
var newListItem = '<li>' + item + '</li>';
frag.appendChild(newListItem);
});
$('#ballers')[0].appendChild(frag);
// ou isso
var myHtml = '';
$.each(myArray, function(i, item) {
html += '<li>' + item + '</li>';
});
$('#ballers').html(myHtml);


Começar seu seletor com um ID é sempre melhor.

Código:


// rápido
$('#container div.robotarm');
// super-rápido
$('#container').find('div.robotarm');


A abordagem $.fn.find é mais rápida pois a primeira seleção é manipulada sem passar pelo engine
de seleção do Sizzle - seleções só com ID são manipuladas usando document.getElementById(),
que é extremamente rápido, pois é nativo para o navegador.

Seja específico no lado direito do seu seletor, e menos específico no esquerdo.

Código:


// não otimizado
$('div.data .gonzalez');
// otimizado
$('.data td.gonzalez');
Use tag.classese possível no seu seletor mais a direita, e somente tagou .classna esquerda.
Evite especificidade excessiva.
$('.data table.attendees td.gonzalez');
// melhor: remova o meio se possível
$('.data td.gonzalez');


---

Bom por hora é só, o tópico será alterado de acordo com minha disponibilidade!

Abraços,

JS

[Reservado]

Código:

var myLength = myArray.length;
for (var i = 0; i < myLength; i++) {
// faz alguma coisa
}



estou muito acostumado da maneira a não armazenar o length, que essa dica acho que não conseguir por em pratica.

mas eu concordo que dessa maneira é melhor.

ótimo tutorial JS, eu vi um parecido pela net, explicando o JQuery !

Abraços.

Muito bom, vai servir para melhorar meus códigos