I’m working on a web interface that requires a large number (hundreds) of DOM objects to be created and dynamically updated or removed as the underlying data changes. I’m trying to settle on the most effective strategy for keeping up with all the objects so the application scales as gracefully as possible.
My first inclination is to create arrays and hash tables referencing the DOM elements anonymously so I can find them quickly and dispatch any necessary changes. Is there a reason this approach would be problematic? Would it be better to look them up in the DOM tree instead?
What about jQuery objects? Is it better to create them frequently on the fly and allow them to be garbage collected or to keep large numbers (hundreds) of them around in some kind of structured cache?
Is better to keep one jQuery Object instead of creating them multiple times. But keep in mind that the bottleneck in Javascript is DOM manipulation, not saving references of its elements.
I just made some tests with 10000 divs and is significantly faster to have everything in a array/jquery object than look it up everytime in the DOM.
Use IDS and indexes for maximum efficiency (Many people use old browsers that don’t have a native class selector) ie: