sencha apps slows down on rendering on ui thread

Question

I am creating sencha web app using sencha touch 2.2.1. In my application I have screen which consists of a container where I added multiple panels. A single panel consists of two panels, a top panel and the inner panel.

On initialization of page, I am calling ajax api to fetch list of data for top panel of each item in container. and on top panel clicked, I am calling api for that item to fetch data for inner panel. On api call finished, I am rendering data to inner panel and making that panel visible. This code is same for all items in a container on top panel clicked.

There is also a button at top to 'expandAll' which will call api's for all items in a for loop one after one and rendering data for each inner panel. First I am calling one api and then on getting response of that I am storing in store and rendering on screen then calling next api, like this for all items.

getDetailData:function(params){
    var detailStore=Ext.getStore('DetailData');

    detailStore.load({
        callback:function(data,opt,success) {
            detailStore.storeDetailData(data);
            _this.onShowDetailData(data);

            // now call next api from here until all items data fetched and displayed
        }
    });
}

In this case, fetching all items data and rendering on ui thread is taking more time and app slows down.

Also while rendering data, I have to apply filters on store to filter data before rendering data for each time.

I wanted to know how should I do this processing and rendering work. As ajax api call and fetching data from server is not taking more time but processing and rendering is taking more time.

Any suggessions on this,

thanks

Answer 1

I would think about separating your panel creation from your data population. That is, create your panels when your app is loading, then when you make your XHR you can just push the data into the panels and show them, rather than the overhead of the AJAX call, panel creation and widget rendering at the same time.

You could try to nail down the problem by profiling your JavaScript with the Profiles tab of the Chrome Developer Tools or with external tools like Compuware's profiler (I used it when it was dynaTrace):

http://www.compuware.com/en_us/application-performance-management/products/ajax-free-edition/overview.html

However, from my experience you will probably see a lot of time taken in the Sencha methods which makes it difficult to see what changes are required.

Lastly, older browsers will perform this rendering much slower than newer browsers. If you can avoid supporting IE 6, 7, and 8 - your Sencha app will be much more responsive!

Answer 2

First of all I would do the profiling as suggested above. You need to find out wether the API calls or the layout rendering is slow.

According to my experience most of the performance problems are coming from the complex DOM structure. Sencha is adding huge number of DIVs for each component you add to the screen (just check the resulting source). This has significant effect on the app performance.

If you find your complex layout is the reason of the performance problems then you can either reconsider your screen layouts or replace some of the sencha controls with plain HTML rendered into the tpl of a container.

Answer 3

I suggest not using panels, unless you have too. With a large number of items, you will be better with a dataview list with infinite checked to true. This will render much faster and you can tie your interactions to each on item on the list instead. If you are just doing markup, it should render much faster. Otherwise, every add will require layout.