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:
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:
Ao invés de usar:
O código:
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..
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.
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.
Bom por hora é só, o tópico será alterado de acordo com minha disponibilidade!
Abraços,
JS
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!
Os Seletores
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();
- Código:
jQuery(document).find('div.PunBBForumeiros').doSomething();
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();
Ao invés de usar:
- Código:
jQuery('div.PunBBForumeiros', contexto);
- Código:
jQuery(contexto).find('div.PunBBForumeiros');
O código:
- Código:
$('.myClass');
- Código:
$('div.myClass');
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
}
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);
- Código:
// rápido
$('#container div.robotarm');
// super-rápido
$('#container').find('div.robotarm');
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
Última edição por JScript em Seg 03 Jun 2013, 12:51 pm, editado 1 vez(es)