Question

I’m writing a library where I need to store some data to be able to address quickly DOM elements. I don’t know if I should store element ids (strings) and do $(document.getElementById(this.idVar)).jqueryMagic() or store the element object reference (object HTML*Element) and do $(this.eleVar).moreJqueryMagic(). I don’t mind readability, I just want to know the difference in memory space between each method and the difference in performance.

Thanks in advance!

Answer 1

If performance on this level is an issue you should not use jQuery, it is a way bigger performance hog than a detail like this. (That is not to say that jQuery is bad. You do in general pay for it in performance, but that is most often not an issue.)

If you are accessing the object multiple times general wisdom is that storing the object reference is faster as you eliminate a level of dereferencing.

If you use jQuery you should in general store the jQuery wrapper rather than the raw element, as to avoid creating redundant wrappers:

this.jqVar = $(document.getElementById(this.idVar))
this.jqVar.jqueryMagic()