Maximum number of divs allowed in web page

Question

Hi I was wondering if there is a limit to the number of divs that are allowed on a web page?

For example will Internet Explorer start to choke when it has to render a webpage with a thousand divs?

Answer 1

I know this is an old post, but I recently did a test that is directly related to this topic and I wanted to share my results.

I created a simple php script that spits out x number of 5px by 5px inline-block divs to test browser stability and page scroll-ability.

At 1000 divs on the page IE9, Firefox, and Chrome have no problem whatsoever and don't even seem to hiccup when scrolling.

At 10,000 divs IE9 and Chrome are able to scroll with a barely-noticeable delay, still within the 'acceptable' range in my book, however Firefox begins to lag more noticeably, to the point where you feel the scroll bar is jumping into position a half-second later than it should.

Interestingly, the performance difference between 10,000 divs and 100,000 is not as drastic as you'd imagine. IE9 and Chrome perform with only a barely perceptible delay in scrolling (with Chrome being the slightly smoother of the two), and Firefox has a delay that is very noticeable and would probably be considered annoying, but still functions reasonably well (i.e. it doesn't crash).

Now at 500,000 divs on the page it finally started to get interesting. IE9 Crashed and tried to restart itself (on the same page, of course) and crashed again, at which point I shut it down properly, restarted it, and tried one more time to make sure the same result would happen again. It did.

Chrome remained stable, but it became nearly impossible to scroll the page due to the extreme delay.

The big surprise was Firefox, the browser that was chunky at 100,000 divs is just about the same at 500,00 divs ... scrolling is not smooth, but it is way, way better than Chrome.

Amazingly, the results were pretty much the same for 1,000,000 divs on a page! Firefox handled them without crashing and remained scrollable though 'chunky'. IE9 crashed. And Chrome was able to load the page but became so slow that it was virtually unusable.

I know this isn't exactly a scientific study, but I figured it might be interesting to someone else besides myself.

Tests were performed on a Dell workstation with Dual-Xeon processors and 4 gigs of ram, running Windows 7.

Answer 2

There are two things to consider. Memory is one, where DOM nodes take up a huge amount of space. The other is CPU time needed to re-render all of these nodes when something changes. The threshold of smooth rendering depends on the engine used. In my experience, IE falls far behind, starting to choke after several hundred. Firefox can take several thousand, and it's about the same (and a little better) for WebKit browsers like Chrome.