What's the average limit of divs for a page to be stable?

Question

Some time ago I found this site which has an API to draw stuff in javascript using divs.

I've tried to use it, but noticed that as the number of divs increased, the stability of the page (especially doing select,copy,paste) decreased.

Now I'm about to write a web-app that will have a huge amount of generated divs, and I'm wondering if it will affect it's stability.

What's the average limit of divs one can use in order for the web page to remain stable, and avoid overloading?

Answer 1

Browser and application specific. I don't know of any good metrics or resources for this, and since each javascript application is unique in its use of divs, I don't think there's a hard limit.

For some designs on some browsers, it'll be a low number, while the same designs on other browsers might be higher, and different designs may be opposite.

There are several different factors to take into account:

• DOM handling in the browser
• Rendering in the browser
• Javascript engine
• How the browser connects the above items, queues events, triggers, etc

I believe the only way you'll get good information is to do some testing that exhibits the behavior you expect your application to implement.

If there's a way to avoid extra divs, though, take it.

Answer 2

Unfortunately, as you have found creating huge numbers of DIVs adds lots of extra cruft to a page and makes the browser unstable.

Before you create your app it may be a good idea to heavily test how different browsers react to large numbers of divs.

It would not be hard to dynamically generate web pages which resemble the output of your new web app and experiment with the number of divs in each.

I expect there to be large differences in performance depending on the browser used too.