Is There Any Limit On Number Of Html Elements, That Browser Can Display Without Problems?

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 mome

Solution 1:

Another thing you should look at is table sizing. If you have your table styled with table-width:auto; the browser has to measure every single element in the table to size it. This can get insanely slow.

Instead, choose a fixed width or at least style the table using table-width:fixed.

Solution 2:

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.

Solution 3:

If you have got JS on each table row then old computers will not handle that. For HTML itself you shouldn't worry much.

You should worry about fact that normal human being doesn't like large tables this is what pagination is made for. Separate it using paging for better usability nor other concerns.

Think of book that doesn't have pages but one large page, would you like to read it? Even if your eyes (PC in our case) can handle it.

Solution 4:

I don't think there is a limit. However, the longer a HTML file is, the more resources, your computer will need. But the table has to be very large then...

Solution 5:

The limit is really determined by the user agent and client machine being used. HTML, in the same way as XML, is a tree format of data. Therefore the more elements, the further through the tree the client browser has to search to render the page.

I had issues adding more than 100 tables to a div (as an old workaround to IE6 not being able to create table elements dynamically).