27 Apr 2012 8:14 AM #1
css layout performance issue with sencha touch 2
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/showthre...-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.
30 Apr 2012 6:51 AM #2
- Join Date
- Mar 2007
- Gainesville, FL
- Vote Rating
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.Mitchell Simoens @SenchaMitch
Sencha Inc, Senior Software Engineer
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services email@example.com
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!
When posting code, please use BBCode's CODE tags.
2 May 2012 6:06 AM #3
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.
4 May 2012 4:32 AM #4
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.