fast interacting with large number of elements inside a container (DOM, javascript)
I will try to provide sources as requested.
First solution - best one
According to this site: JavaScript Grid with One Million Records
You can learn several important things:
- Large number of DOM nodes make rendering slow
- JavaScript arrays can handle large data sets
- Looping through large arrays is fast
- Sorting arrays by providing custom function to Array.sort() is fast
- eval() is slow, should not be used in large loops
So, I would recommend you to build an array to handle in a fast way your elements.
Second solution
Another solution taken from this site: Processing large amounts of data in JavaScript
would be to use a timeout (as strange as it sounds) to increase speed of handler.
The idea comes from Book: Secrets of the JavaScript Ninja
If you want only to show/hide, without change anything in the div's DOM and you know all the IDs, I think, that the best (fastest) way to archive this would be to prepare <style />
element and append it to DOM. Style el should contain all the ID's and proper display. Iterate through IDs and add it to CSS string, then create <style />
element and append string to it. This should work for you.
Build an id-to-element map / hash table beforehand:
var map = {};
for (var i = 0, l = ids.length; i < l; i++) {
map[ids[i]] = document.getElementById(ids[i]);
}
where ids
is a list of element IDs. (If you need to 5000 elements by their IDs, I assume you have a list or can generate one.)
Then when you remove the container element from the DOM, you can use the map to find elements by their IDs.