• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 796
  • Last Modified:

IE9 slow to unresponsive if drawing to a DIV nested too deep

I have a web app that we use to display tiles of a very high detail, high resolution image. The person can view the detail much like google maps.  We’ve found that performance is very slow when the image is drawn in a DIV nested deep. On IE9 it just becomes unresponsive. We’ve done some testing and noticed that it is very fast if the DIV is at the root level. Some people in the group feel that we’ve found an IE9 bug while others of us feel that there is something that we’re not doing right.

My questions:
Is there a limitation on the number of elements that a page can contain? How deep is too deep? Why does IE9 work if we turn Hardware acceleration off?

More info:
•      At varying levels the performance is slow on all browsers.
•      When we take the DIV where the image is drawn out of the web application, it draws fast and we can move the image very smoothly.

1 Solution
Andrew DerseIT ManagerCommented:
Very interesting question.  Are you experiencing anything like that in Safari or Firefox?  I have never heard of being nested TOO deep...but I have numerous issues with IE not functioning properly...when Firefox and Safari function just fine.
Highly interesting.

This is just a thought... You mention it "works like Google maps." If you are using the jQuery framework, there could be an issue with how jQuery parses the information. Having to recurse through the nodes "over and over" because it is deep, and each time passing graphical information around may cause it to be very slow.

I would be interested to find out more about the platform / technologies involved and / or the logic processes that are going on to further the discussion. For example, are you doing an AJAX call to get more of the hi-res images or pre-loading the hi-res image and moving it around? Is it broken up into tiles like Google maps? Etc...

smithwahlAuthor Commented:
@Nukit: It slows regardless of the browser but it is more noticeable in IE9. I never heard of the nesting being a problem either but that is what it is showing us. I'm wondering if it could be an issue of it having to run through the DOM nodes to find the element.

@DrDammit: Yes we are using jQuery framework. I think it could be a recursion issue as you said.  We use AJAX to pre-load tiles of the image being viewed around the location being viewed. I hope that answers your question.
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

The nesting will cause a some slowdown if you are using jquery instead of straight javascript.  That is because the addition layer of abstract requires addition interpretation and each layer of div requires it to iterate through the DOM tree, even though the address is probably already in its workspace.  In other words the jquery starts bloated and gets more bloated the deeper it has to go.

As for the performance of IE that is the expected result.  In virtually every benchmarking test it is the slowest at rendering of all major browsers.

smithwahlAuthor Commented:
We found the cause of the problem and why IE9 hangs. It might sound outrageous to you (it does to us also) but we now have proof. The problem is the CSS3 “border-radius” property. I know, you probably have the same reaction that we did when we saw it. Turns out that if you have this property on a large DIV that is very heavy with graphics, all browsers slow down noticeably.  However, IE9 come to a crawl if it is set to “software” mode.  IE9 uses the GPU to draw the radios. If you’re in “software” mode it cannot process it through the GPU and it becomes unresponsive. We need to do some more testing to see if the fact that we are using transitional document type has any effect over strict document type.

So the answers to my original questions are:
Is there a limitation on the number of elements that a page can contain? Once we removed the radios we did not see that there was any limitation on the number of elements.

How deep is too deep? No clear answer to this. I would suspect that the limits would vary on 32 or 64 bit CPU and the memory on the system.

My third question was wrong to start. I asked: Why does IE9 work if we turn Hardware acceleration off? The question should have been: Why does IE9 work if we turn Hardware acceleration on? The answer to that is that the radius is processed by the GPU in hardware mode. So if you have a computer with older hardware that uses WDDM 1.0 you will be in software mode by default. In that case IE9 will hang.
smithwahlAuthor Commented:
We spent alot of time on this. It was amazing that we found it and where able to reproduce it. Unfortunately there was not enough information provided by the contributors to help us find it and no answers were given to the questions.

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now