Extreme nesting experiment in IE and Firefox

On the ever interesting topic of curiosity over good sense, I had an interesting discussion about how far you can nest HTML tables in different browsers. The person I was talking to had noticed that at a certain point the tables just stopped displaying when they tried to take their web rendering to an extreme case.

I was curious so I created a little ASP.NET sample to see how many levels of tables you could nest. It turned out that IE will stop rendering at the 28th level of table and Firefox will stop at the 34th. I tried it on a couple of different machines and got the same result so it seems to be something hard coded in both browsers. You can try it yourself on the HTML page that my sample created.

Here’s a screenshot of the result that I got in IE:
27 levels deep in IE

Here’s the screenshot of my result in Firefox:
33 levels in Firefox

I thought the 26 levels of hierarchy in IE and 32 in Firefox might be some inherent limitation on how deep you can nest things. The simplest table is already four levels deep (table->tbody->tr->td) so I thought maybe the magic number of maximum nesting was the maximum tables number multipled by four. So I did another experiment where I nested a simple div tag with a border and some text as many levels deep as it would go.

The results were not what I was expecting. The limitation on table nesting does not automatically apply to other elements.

In IE I managed to get the nesting up to a thousand levels and it behaved about the way I expected. It could handle several hundred levels of nesting fine (which is far past what you ever *should* do on a real website) but when it got up to a thousand, the page rendered really slowly and any attempt to do scrolling took minutes. I suspect the limitation was to do with my (fairly nice) laptop and that the exact amount of nesting that IE can take is totally dependant on the resources of the machine.

Here’s a picture of my IE7 at a thousand levels deep and a link to the page (I wouldn’t recommend opening this in an IE window that has anything that you need to save. It could crash your IE). At this point IE is not even really getting the rendering right but what I’m doing is pretty much crazy so I wasn’t really expecting it to work:

one thousand levels in IE

What really surprised me was what happened when I tried this in Firefox. I started off by giving it the same treatment as IE with 1000 levels and it worked fine. Really quick to render, no problems scrolling. So I upped it to 10,000 levels. Stack overflow in my recursive ASP.NET sample and I had to modify it to use a for loop instead. Then it rendered fine. Then I took it up to 100,000 levels of nested div and was impressed that it didn’t make much difference at all.

The last thing I tried was a million levels of nested div tags. It was supposed to be a joke. I was half expecting my machine to erupt into flames at this point or at the very least get annoyed at the amount of memory that Firefox was using. It was a 53MB HTML file and the page took an age to be generated and to display in Firefox. The browser itself was (understandably) not very responsive. I couldn’t resize it or move it or minimize it without the application freezing up, but unbelievably right at the bottom of the page was my millionth nested div. Once it rendered I was amazed that it was still scrolling quite comfortably and that I could go down to the millionth div tag which it was rendering in a sensible way.

Here’s a picture of the one millionth inner div inside of firefox on my browser. I’m not going to put a link to the file itself because it’s 5mb even zipped up and it’s a browser (IE anyway) killer:
one million levels of nesting in firefox

So I guess the amount of nesting you can do in this scenario is just dependant on the resources of your machine. I think the most interesting thing was observing how differently the IE and Firefox rendering engines handled an extreme edge case like this. Standards may get pretty consistent results for the stuff that happens every day but as soon as you head out towards the edge cases you start to realize how different the browser rendering engines really are.

Posted on 04 Aug 07 by Helen Emerson (last updated on 04 Aug 07).
Filed under Web development