Internet explore is unresponsive while loading a large page

Question

We have a html page being rendered in the browser (IE) that causes the browser to hang. The page is generated through server side script (ASP.NET and viewstate is disabled). The page while loading takes a long time (its not a b\w issue since we can reproduce it on local machine) and sometimes results in script unresponsive error. On debugging the issue we found that the html size on the client side is 4.73 MB. There's also a lot of DOM traversal (using JQuery) after document is ready (jquery-document.ready). After loading as well, the page simply hangs on any user interaction (scroll, mouseover) etc. A CPU usage spike (25-50% usage) is seen during loading and on any user interaction

Answer 1

Internet Explorer is very peculiar with the DOM. It's very fragile.

I recommend the following: http://msdn.microsoft.com/en-us/library/ms533019(VS.85).aspx http://blog.dynatrace.com/2009/12/12/understanding-internet-explorer-rendering-behaviour/ http://blogs.msdn.com/ie/archive/2006/08/28/728654.aspx

and most importantly: http://www.quirksmode.org/dom/innerhtml.html

Answer 2

Without seeing the code, my only guess here is that you're doing something critical within javascript/jQuery, like cloning DOM nodes, 'excedently' create a lot of DOM nodes etc.

Kind Regards

--Andy

Answer 3

The first thing I'd look at is the insanely large HTML size the client receives. Internet Explorer is not known for fast processing of large amounts of HTML, especially not when you're doing a lot of DOM traversal afterwards. The DOM processing of such a large tree, explains the CPU spike.

Is it really necessary to send such a large amount of HTML to the client?

Answer 4

This may or may not help you but the only time I've seen html pages even remotely approaching that size was when someone was writing massive amounts of data into js arrays for lookups.

Maybe consider moving some of the data (or even html if it can be partitioned nicely) into web service / ajax calls? Lookups are often much more efficient that way anyway.

If it is just raw html, consider partitioning it and only loading the next section through ajax when the user scrolls down / clicks the tab / etc.

Answer 5

If the 'Script Unresponsive' dialog upon loading is a problem, it can be cheated at least in older IE versions. Divide the work you are doing into multiple tasks with setTimeout. This causes IE to lose track of how much total execution time is used.

You can throw up a some kind of 'loading' div while the background work is progressing, this at least results in a better user experience.