Basically I’ve got a huge table, which gets even bigger as user scrolls down (auto preloading subsequent rows). At some point browser becomes sluggish, it starts to hang for a moment as I click around or try to scroll and more sluggish it becomes, the more rows it gets. I wonder if there is any limit on number of elements that page can hold? Or maybe it’s just my javascript leaking somewhere (although I’ve got only one event handler, attached to the tbody of the table – and a script that parses bubbled mousedown events).
Update: Delay becomes noticeable after a thousand of loaded rows. The speed of scroll itself is pretty bearable, but for example highlighting of the clicked row (with the help of single event handler on tbody) is painful (it takes at least 2-3 seconds and delay grows with the number of rows). I observe delay on all browsers. It’s not only me, but almost everyone who visits the page, so I guess at some extent it affects every platform.
Update: I came up with simple example here: http://client.infinity-8.me/table.php?num=1000 (you can pass whatever number you want to num), basically it renders a table with num rows and has a single event handler attached to a parent table. I should conclude from this, that there actually is no noticeable dropdown in performance, caused by number of child elements. So it’s probably a leak somewhere else 🙁
I don’t think there is a limit defined by the standard. There might be a limit hard-coded in each browser implementation, though I would imagine that this limit is likely to be billions of elements. Another limit is the amount of addressable memory.
To solve your problem: As well as automatically loading elements as you scroll down, you could automatically unload the ones that have scrolled up off the screen. Then your program will remain fast even after scrolling a lot.
You may also want to consider an alternative interface such as paging.