大规模Dom操作

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.

As a warning: this is extremely dependent on your computer performance. Frankly - anything approaching 100 elements in a DOM manipulation starts getting a little silly and expensive. That said:

1) Depends on your system, my older system tops at about 30 and my newer one can get up to 120 before I break things.

2) Work with them on as large a level as possible. Manipulating a ul with a bunch of li's in it is much faster than manipulating a bunch of li's. Use jQuery and store the object in a variable (so you're not querying the DOM each time it's used) to enhance performance.

3) Initially load the first data the user will see, then fetch it in similarly sized batches. If you can only see 20 li elements at a time there is no reason loading any more than that plus a little buffer area (30?).