css layout performance issue with sencha touch 2

[federico80]

Hi all
we have found some performance problems when we add a component that is modal on the Viewport. This seems something related to this post http://www.sencha.com/forum/showthread.php?194765-isPainted-takes-a-long-time-when-there-are-a-lot-of-controls-on-the-screen .

This problem arises also every time a selectfield is pressed and the relative picker is displayed.
I've attached to this post a test page that reproduce this issue (i've renamed .txt the file, but is an html file).

Using the SpeedTracer chrome plugin to profile the browser when pressing the selectfield, reveals that almost all the time is spent recalculating layout positioning of elements and not in js code.

Thanks
Federico.

[mitchellsimoens]

We won't have a lot of control over speeding up CSS and it doesn't surprise me it's going slow. You have quite a lot rendered at once. Using dataview with components triples the DOM size versus not using components.

[federico80]

Hi mitchellsimoens
Thank you very much for your response.
I was afraid that the answer would be to reduce the number of components in the page, anyway i'am a bit surprised that the operation of putting a mask on the ViewPort could be so influenced by the page DOM size, i'm trying to figure out how this can be optimized and if the use of particular types of components layouts or 'docked' components within the viewport will affect the performance of creating a mask over the ViewPort.
Any suggestions would be greatly (greatly) appreciated.

[gverduci]

Hi,
I have the same problem: components rendering requires a lot of time.
A small increase in complexity of DataItem corresponds to an appreciably difference in rendering time of floating component.
Any suggestions?

Giuseppe