12

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?

Sau
  • 121
  • 1
  • 3
  • 10
    if you are having to ask such a question it is likely you doing something wrong... – Mitch Wheat Aug 15 '10 at 04:53
  • 1
    If you are having a page with this kind of design, number of allowed divs isn't your biggest problem – Andreas Wong Mar 23 '12 at 16:33
  • 2
    I disagree that the design is wrong. I've written searches that allow people to list 100, 250 or 1,000 items and needed divs to dynamically change their content. The question was whether there is a limit; the answer is no but realism suggest a cap. – RichM Jun 22 '14 at 09:54

2 Answers2

34

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.

Phil
  • 668
  • 7
  • 13
  • How about the loading time? How much time did it cost to render those divs? – Ismail Jan 23 '15 at 08:37
  • 1
    @Ismail Well this test was a few years back, but I don't recall the render time being a major issue at all. Maybe a few seconds when the divs got into the hundreds of thousands+. – Phil Jan 23 '15 at 18:57
1

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.

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210