jQuerys $ .data () vs. propriedade do objeto DOM

9

Recentemente, precisei acrescentar alguns dados ao LI elements criado dinamicamente. Em minha primeira instância, usei .data() de uma maneira como

var _newli = $('<li>foobar</li>');
_newli.data('base', 'ball');
// append _newli to an 'ul'

que estava terrivelmente lento. Essa lógica acontece em um loop que pode facilmente crescer até mais de 500 itens, demorou séculos! Às vezes até quebrou o tempo de execução do javascript.

Então mudei para $.data() . De alguma forma, anexar dados a um objeto com isso é como 8x mais rápido do que fazê-lo na chamada do método .data() . Então agora parecia

var _newli = $('<li>foobar</li>');
$.data(_newli[0], 'base', 'ball');
// append _newli to an 'ul'

Isso foi / é de fato mais rápido, mas ainda demorou 3-4 segundos (!) para construir todos os meus elementos (no meu código real existem 6 chamadas para $ .data por elemento).

Então, eu estava realmente preso a isso, eu me perguntei por que diabos usar .data() ou $.data() de qualquer maneira? Eu poderia anexar meus dados ao DOM object . Então eu fiz

var _newli = $('<li>foobar</li>');
_newli[0].base = 'ball';
// append _newli to an 'ul'

Voila, wow para o meu choque, isso foi incrivelmente rápido! Eu não podia acreditar que isso correu tão bem sem qualquer desvantagem. Então, essa é a minha pergunta sobre tudo. Eu não encontrei nenhuma desvantagem para esta técnica até agora na net. Há leituras sobre referências circulares que você pode criar usando este caminho, mas AFAIK "somente" no IE e somente se você se referir a objects .

Algum especialista em pensamentos?

atualização

Obrigado pelos bons comentários e postagens. Atualização curta @patrick dw:

Você está certo, eu estava passando o underlaying DOM element ao usar $.data() . Ele nem funciona com objetos jQuery, pelo menos não como esperado. A idéia sobre o uso de um objeto e passá-lo por $.date() eu tive eu mesmo, mas novamente eu fiquei tão chocado com a diferença de desempenho que decidi ignorar o método .data() como sempre.

    
por jAndy 04.08.2010 в 18:28
fonte

3 respostas

3

Você está correto sobre referências circulares , que não é um problema fora do IE, e no IE só se torna um problema quando JavaScript tem uma referência a um objeto DOM e um objeto JS é atribuído a uma das propriedades do objeto DOM. Acredito que isso pode ser resolvido simplesmente anulando quaisquer referências no JS ao objeto DOM.

O método $().data() é um wrapper excessivamente complicado para $.data() (consulte jQuery.fn.data : link , que por sua vez chama jQuery.data : link ), então cortar esse intermediário economizará uma quantidade de tempo não trivial, especialmente se ele for feito 500 vezes.

Nesse caso, o método $().data('foo', 'bar') não faz muito mais do que el.foo = 'bar' . Faça o que é mais rápido.

    
por Ryan Tenney 04.08.2010 / 18:50
fonte
2

Ao tentar adicionar propriedades personalizadas a um objeto NodeList, o navegador (IE) pode desautorizá-lo. Consulte: link

    
por Tim 25.01.2011 / 16:44
fonte
0

Isso pode ajudar:

E leia o seguinte sobre como usar um DTD personalizado:

Em suma, na maioria das vezes, não acho que você tenha problemas ao usar atributos personalizados. A maioria dos navegadores atuais / sensíveis combinam com isso. Eu vou dizer, eu fiz ter problemas com um webapp que eu desenvolvi para o MobileSafari, o que me forçou a recorrer ao uso de $.data elementos ocultos. Felizmente, eu não tinha mais de 500 elementos, mas mais cinco ou seis.

    
por karim79 04.08.2010 / 18:50
fonte