I am wondering if anyone can give some safe guidelines on the maximum level of dom manipulation you can do with jquery without freezing the browser.
Also the best methods for mass DOM manipulation.
Basically at any one time I could be dealing with lists of up to 40k li‘s
All I am really doing is showing one, hiding the other.
So here are my questions
- How many li’s could I theoretically manipulate at a time without crashing the browser?
- How should I work with the li’s?
- Manipulate as a single object (ul level)
- Loop over each li in the first list removing them, then loop inserting each new li.
- Loop over chunks of li’s (if so how big 10, 100, 1000, 10000 at a time?)
- How should I fetch the data? (its in json format)
- Grab the data for the entire list (40k li’s worth) in one ajax call.
- Insert the data for every list at page creation(could be upwards of 20 lists = 800,000 li’s
- Do several ajax calls to fetch the data (if so how big 10, 100, 1000, 10000 at a time?)
If you really want to be manipulating that many then you should probably adopt something like http://developer.yahoo.com/yui/3/async-queue/
As the answer for how many you should be working with at a time, you could build in a calibration which looks at how quickly the last set completed and work with more / less accordingly. This could get you something that works in everything from desktop chrome to mobile IE.
The same goes for the ajax calls, make it able to ramp up according to the net speed.