Link to home
Start Free TrialLog in
Avatar of smithwahl
smithwahlFlag for United States of America

asked on

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.

Thanks
Avatar of Carlos Llanos
Carlos Llanos
Flag of United States of America image

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.
Avatar of DrDamnit
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...

-DrDamnit.
Avatar of smithwahl

ASKER

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

Cd&
ASKER CERTIFIED SOLUTION
Avatar of smithwahl
smithwahl
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.