Results 1 to 3 of 3

Thread: How to increase performance ?

  1. #1

    Default Answered: How to increase performance ?

    Hi,

    i'm working in hybrid app development. i used sencha touch 2.4 and cordova 4.2.1. You know my app is still getting problem in performence. When i run my application in my mobile browser working slow.

    i searched regarding performance and i got some links to How to reduce and code reusability ?
    So i changed some of my code and check again. But little bit improment only. i need to increase little bit more. Because in somecases application getting stuck.

    I learned some think like :
    • Use Sencha Build tool to package all required JS files (views, stores, models) and compress them in one app-all.js file.
    • Look out for other CSS or JS files and make sure all of them are compressed.
    • Make sure you are using smaller sized images. You can also consider using an image cruncher to cut back on image size. For videos, consider embedding YouTube videos rather than streaming video yourself.
    • If your app is sending too many requests to server (using Store loads or via Ajax/REST), consider fetching the data in JSON format inside your JSP/PHP script response itself. You can then load the stores and display information from locally available data. Avoid sending too many AJAX/REST requests to server to get simple information like user/organization name, branding params etc.
    • Destroy components that are not visible on the screen anymore. Avoid too much nesting of panels. Try to keep your DOM size smaller.
    • The biggest performance hit you will take is the size of the DOM, how many elements are rendered at any given time. The larger the DOM, the slower and twitchy the animations will look. Also the slower it can react to things like user interactions.
    • instead of "remove" and that works fine. For me, "destroy" works out better since I want to actually remove the component from the DOM, not just hide it.

    So i reduce code like :
    • form.destroy();
    • reduce Ext.getCmp()
    • Reduce loop conditions and if conditions

    Could any one help to alternative solution for
    • Ext.getCmp()
    • Ext.getComponent.query()
    My Questions are :
    1. is any other way to increase performance of sencha touch app?
    2. how to reduce DOM elements in my app ?
    3. How much DOM elements can present in application which is for good performance?
    4. I used "id" property in my components. Is this good ? or Could i use "itemId" instead of "id" ?
    5. i used "Ext.getCmp()" to get component. Is this correct or i need to use any other method to get components?
    Please clear my doubts .... thanks in advance

  2. What you're describing isn't really descriptive enough as to what is slow. Are you talking about the initial load time, the animations, the scrolling, ajax, etc.

    However, I'll try my best to answer a few questions as to what I take into consideration when developing my apps.

    Quote Originally Posted by Prasanth Dev View Post
    Could any one help to alternative solution for
    • Ext.getCmp()
    • Ext.getComponent.query()
    The thing about these methods is that they will have to go from top to bottom to look for what you're looking for because you're querying for it from a broad scope. If you narrow down the scope it'll be much more efficient. It is convention to have the first argument of an event handler to be within the scope of itself. For example, onButtonTap will expect the button to be the first argument. From there, you can "traverse" up or down to look for what you're looking for. If, for instance, the button is contained within a form and you need to submit the form, you can execute button.up('formpanel') to get the form instance. That way you're not going through all the registered components to look for something you could have done more easily.

    Example:
    Code:
    var form = Ext.widget('formpanel', {
        items: [{
            xtype: 'button',
            handler: function(button) {
                var form = button.up('formpanel'),
                    values = form.getValues(); // Do something with this
    
                form.submit();
            }
        }]
    });
    Quote Originally Posted by Prasanth Dev View Post
    My Questions are :
    1. is any other way to increase performance of sencha touch app?
    2. how to reduce DOM elements in my app ?
    3. How much DOM elements can present in application which is for good performance?
    4. I used "id" property in my components. Is this good ? or Could i use "itemId" instead of "id" ?
    5. i used "Ext.getCmp()" to get component. Is this correct or i need to use any other method to get components?
    As far as the above mentioned questions concerning DOM elements, the answer is... make it as light as you can without sacrificing maintainability (within reason).

    What that will actually mean will depend on your specific application so I can't help you very much without seeing the entire app. But if you're (for example) rendering 100's of data item components within a dataview, expect it to be slow... and you can't really blame the framework for that.

    But a few more things (out of many) you can take into consideration would be:
    1. Don't use an expensive component when it's not necessary. For instance, if you're simply using html or tpl to display your content, you don't need an Ext.Panel.
    2. Don't use components if it's not necessary. I'll see some users nest many components into some container that could really have been achieved using one component with a tpl config.
    3. High quality images are going to be expensive no matter what so use it wisely
    Additionally, there's an excellent video about FastBook that you might be interested in that covers some of what you're looking for.

    Hope that helps

  3. #2
    Sencha Premium Member
    Join Date
    Jun 2011
    Posts
    46
    Answers
    5

    Default

    What you're describing isn't really descriptive enough as to what is slow. Are you talking about the initial load time, the animations, the scrolling, ajax, etc.

    However, I'll try my best to answer a few questions as to what I take into consideration when developing my apps.

    Quote Originally Posted by Prasanth Dev View Post
    Could any one help to alternative solution for
    • Ext.getCmp()
    • Ext.getComponent.query()
    The thing about these methods is that they will have to go from top to bottom to look for what you're looking for because you're querying for it from a broad scope. If you narrow down the scope it'll be much more efficient. It is convention to have the first argument of an event handler to be within the scope of itself. For example, onButtonTap will expect the button to be the first argument. From there, you can "traverse" up or down to look for what you're looking for. If, for instance, the button is contained within a form and you need to submit the form, you can execute button.up('formpanel') to get the form instance. That way you're not going through all the registered components to look for something you could have done more easily.

    Example:
    Code:
    var form = Ext.widget('formpanel', {
        items: [{
            xtype: 'button',
            handler: function(button) {
                var form = button.up('formpanel'),
                    values = form.getValues(); // Do something with this
    
                form.submit();
            }
        }]
    });
    Quote Originally Posted by Prasanth Dev View Post
    My Questions are :
    1. is any other way to increase performance of sencha touch app?
    2. how to reduce DOM elements in my app ?
    3. How much DOM elements can present in application which is for good performance?
    4. I used "id" property in my components. Is this good ? or Could i use "itemId" instead of "id" ?
    5. i used "Ext.getCmp()" to get component. Is this correct or i need to use any other method to get components?
    As far as the above mentioned questions concerning DOM elements, the answer is... make it as light as you can without sacrificing maintainability (within reason).

    What that will actually mean will depend on your specific application so I can't help you very much without seeing the entire app. But if you're (for example) rendering 100's of data item components within a dataview, expect it to be slow... and you can't really blame the framework for that.

    But a few more things (out of many) you can take into consideration would be:
    1. Don't use an expensive component when it's not necessary. For instance, if you're simply using html or tpl to display your content, you don't need an Ext.Panel.
    2. Don't use components if it's not necessary. I'll see some users nest many components into some container that could really have been achieved using one component with a tpl config.
    3. High quality images are going to be expensive no matter what so use it wisely
    Additionally, there's an excellent video about FastBook that you might be interested in that covers some of what you're looking for.

    Hope that helps

  4. #3

    Default

    thanks enagic

Similar Threads

  1. How to increase NestedList performance?
    By mbohlaender in forum Sencha Touch 2.x: Q&A
    Replies: 5
    Last Post: 13 Aug 2013, 12:05 AM
  2. [CLOSED] [4.1.0] NodeInterface.removeAll - performance increase
    By westy in forum Ext:Bugs
    Replies: 3
    Last Post: 29 Aug 2012, 6:14 AM
  3. How to increase performance of the Store
    By nghiaquach in forum Sencha Touch 2.x: Discussion
    Replies: 4
    Last Post: 18 Jun 2012, 12:01 AM
  4. How to increase the scrolling performance in a grid
    By user ext in forum Ext: Discussion
    Replies: 1
    Last Post: 19 Mar 2012, 4:59 AM
  5. how to increase Performance with android
    By vishalatole in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 21 Jun 2011, 6:11 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •