Performance issue with IE8 and IE9

[treadmill]

Hi Sencha!

I'm building an app that requires the generation of a lot of textfields.

The generation of the code for the Ext.Panel is created on the server and then the JSON is loaded into a parent Panel with code for example:-

component.add(json.data);

The problem I have is, the ExtJS framework creates approximately 10,000 lines of HTML code once it renders the panel. IE8, compared to Chrome, is slow. What is odd is that IE9 is slower than when it's in IE8 emulation mode! Bizarrely Safari is the fastest at render these panels, faster than Chrome.

IE9 also showing "Not responding" in it's title bar. IE8 will ask if you wish to allow the script to continue executing.

So as to see a working version of this system, take a look at it here. The project is only at proof-of-concept stage, so this isn't even development.

http://dev.chpqa.com/app.html

When the application loads, click "Open Form F4" button, then after than panel loads, click the "Next question" button. This is the panel I'm referring to that can take an age to load, especially IE8/IE9, not tried IE6 or 7, but running IE8 in a VM environment shows that performance is extremely poor. I have tried using the following for IE9:-

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8,chrome=IE8" >

... and this does make it run slightly faster, but it's still not perfect.

So, is there an issue with the render engine of IE9 or the JS engine of IE? Can I do anything else to make this load quicker? I'm not using lots of nested panels. I do, however, use Controllers on each of the textfields, but this isn't the cause of the slow rendering of the panel.

And for those of you who are wondering whether it's possible to print a bunch of Ext.Panels perfectly, yes, it is possible and the "Print PDF" button does indeed work. See here:

https://www.dropbox.com/s/m4ui1nhxfo...Submission.pdf

[existdissolve]

The performance is pretty bad in Chrome as well. Given the amount of HTML that you're asking ExtJS to render, I'm not sure what would be expected.

To improve it, you could override the template being used to create the form fields and make them thinner.

But I would wonder if it's necessary at all to render all these items simultaneously? Could you use a tabbed panel approach were the "next question" is added as a tab? That way, you could preserve what you've already rendered, and simply add to it (instead of re-rendering everything all at once)?

While I suspect older versions of IE will continue to behave slowly no matter what you do, the severe performance issues you're running into might be a signal that you need to rethink how the app is structured altogether. After all, if you can only get passable performance in bleeding edge browsers, the app's probably not on a good path.

Just my $0.02.

Re: the PDF, it looks pretty good (it's not perfect, but pretty decent). Of course, you're simply submitting the entire HTML block to the server, so after applying a stylesheet to the template being converted to a PDF, I would expect the same

[treadmill]

Re your point about re-rendering everything again.

I noticed that the values in the form, even when a form.submit() is fired, doesn't actually store the values that are shown in the textfields. The occurs when I grab the HTML to the send off to the server to print. Is there anyway of updating the true value of the fields?