Recientemente necesité agregar algunos datos a LI elements creado dinámicamente. En mi primera instancia, solía .data() de una manera como
var _newli = $('<li>foobar</li>');
_newli.data('base', 'ball');
// append _newli to an `ul`
que era .. terriblemente lento. Esta lógica ocurre en un ciclo que puede crecer fácilmente hasta más de 500 elementos, ¡tomó siglos! A veces incluso rompió el marco de tiempo de ejecución de javascript.
Así que cambié a $.data(). De alguna manera, adjuntar datos a un objeto con eso es como 8x más rápido que hacerlo a través de la llamada al método .data(). Así que ahora parecía que
var _newli = $('<li>foobar</li>');
$.data(_newli[0], 'base', 'ball');
// append _newli to an `ul`
Eso era/es de hecho más rápido, pero aún así tomó como 3-4 segundos (!) Para construir todos mis elementos (en mi código real no son como las llamadas a 6 $. datos por elemento).
Así que estaba realmente atrapado con eso, me pregunté por qué diablos usar .data() o $.data() de todos modos? Podría simplemente adjuntar mis datos al DOM object. Así que hice
var _newli = $('<li>foobar</li>');
_newli[0].base = 'ball';
// append _newli to an `ul`
Voila, wow para mi sorpresa, que era increíblemente rápido! No podía creer que esto funcionara tan bien sin ninguna desventaja. Entonces, de eso se trata mi pregunta realmente. No encontré ninguna desventaja para esta técnica hasta ahora en la red. Hay lecturas sobre referencias circulares que puede crear de esta manera, pero AFAIK "solo" en IE y solo si se refiere a objects.
¿Alguna opinión expertos?
actualización
Gracias por los buenos comentarios y mensajes chicos. Actualización breve @patrick dw:
Tienes razón, estaba pasando la subcapa DOM element al usar $.data(). Ni siquiera funciona con objetos jQuery, al menos no como se esperaba. La idea de usar un objeto y pasarlo a través de $.date() Lo tuve yo mismo, pero una vez más quedé tan conmocionado por la diferencia de rendimiento que decidí ignorar el método .data() como siempre.
Si hubo * "6 llamadas a $ .data por elemento" *, ¿hay alguna razón por la que no haya hecho una sola llamada y haya ingresado un objeto por el valor que contiene todas las propiedades que ¿querer? '$ .data (_newli, 'myvalues', {'base': 'ball', 'basket': 'ball', 'foot': 'ball'});' – user113716
En una charla, John dice que es lenta , y sugiere hacer 'var data = $ ('selector'). data(); data ['foo'] = 'bar'; data ['bar'] = 'foo'; etc.', para que solo tengas ** un ** acceso a él. solo para tu información. –
@jAndy - Debería pasar elementos DOM a '$ .data()'. No objetos 'jQuery'. Me pregunto si eso también tiene un impacto en el rendimiento. '$ .data (_newli [0], 'base', 'ball');' – user113716