Another small note on my IE6 performance issues with large tables, which may be of interest to folks here. I discovered that processor load can be kept to an acceptable level (so that redraw events are still respected by the browser) by a combination of some/all of the following, even though I am still using prepend():
1. Splitting the data into several tables of 100 row each. This has the added advantage of reproducing the header every so often, making the output easier to read. 2. Adding array rows piecemeal, say every 50 rows, on a setInterval timer. 3. Keeping the tables hidden until they need to be displayed. Any other pointers are still welcome. halfer wrote: > > > dave.methvin wrote: >> >> Do you have a sample page? There are several other ways to build the >> table, >> but it would be good to make sure the problem you think you're seeing is >> really the problem you have. >> > > Thanks for the reply, Dave. I have removed a fair bit of irrelevant code > and functionality to save your time, demo here: > > www2.newsfast.co.uk:8080/ajax/draggable2 > > The javascript source of interest starts at line 323, and calls > initMisrouted() to start the AJAX operation, and the jQuery callback > executes handleMisroutedData(data). There is a data structure called > JsonStack - don't worry too much about it - suffice to say it is just a > system to split up the reply array and to deal with it piecemeal on a > timer basis. > > The key function is process(dataSegment, info), which deals with a piece > of the ajax reply (from line 392). This simply uses prepend() on a tbody > element. After a few hundred rows, IE really starts to groan, and if > anyone can suggest ways to mitigate against this, I would much appreciate > it. (There is also quite a delay after the DOM amendment during a > make-draggable phase for a div in each table row.) > > Incidentally I thought of a couple of approaches, which I will try (1) > start a new table every 100 rows or (2) use a pager control to step > through the data. But I'd like to fix the issue of large tables if poss, > rather than hiding the problem! > > Any replies welcome, thank you all in advance. > > > >> >> >>> [snip] >>> I am using jQuery 1.1.1 to load table data via an AJAX op into a page, >>> and >>> am running into some performance issues, especially with IE6. I have >>> read >>> here and elsewhere that IE presents some speed issues with DOM >>> manipulation, >>> but haven't found much information to deal with the problem. >>> >>> I am loading about 100Kb of JSON data via an AJAX POST, which resolves >>> to a >>> ~500 x 4 array. This is rendered as a standard table, so I am using >>> prepend(html) on an empty tbody element using a simple #id selector. To >>> reduce the CPU load, I employ setInterval() to progressively prepend X >>> rows >>> every Y seconds, and have found in Firefox, 50 rows every 1 second loads >>> without significant slowdown. However the same in IE causes the >>> processor to >>> max out after 350-400 rows have been added, freezing the animated GIF >>> wait >>> indicator and preventing the browser from responding to window redraw >>> requests for some 10-20 seconds. In fact, trying to prepend too much >>> even in >>> Firefox (ie a few hundred rows in one go) results in a maxed out CPU or >>> even, occasionally, a completely frozen browser. >>> >>> My dev machine is 2.4GHz P4 / 1Gb RAM / WinXP Pro, so it's not the >>> computer >>> (I hope!). >>> >>> Firstly, do I need to be aware of any special rules regarding DOM >>> amendment >>> within setinterval/settimeout callbacks, in any/all browsers? >>> >>> Secondly, is there a way to avoid prepend/append? I understand that >>> innerHtml is available, but I am not sure whether that's standards >>> compliant >>> or particularly cross-browser. >>> [snip] >>> >> > > -- View this message in context: http://www.nabble.com/%28%27-id%27%29.prepend%28%29-slow-on-IE6-in-large-tables-tf3173727.html#a8883710 Sent from the JQuery mailing list archive at Nabble.com. _______________________________________________ jQuery mailing list [email protected] http://jquery.com/discuss/
