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

Posted on 2012-09-07
Last Modified: 2012-09-25
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.

Question by:smithwahl
    LVL 13

    Expert Comment

    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.
    LVL 32

    Expert Comment

    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...


    Author Comment

    @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.
    LVL 53

    Expert Comment

    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.


    Accepted Solution

    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.

    Author Closing Comment

    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

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    These days socially coordinated efforts have turned into a critical requirement for enterprises.
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now