Most of the lists in Sencha Touch are connected to a store. When the store only contains a small amount of records, performance is not a problem. However, when the store is filled with a big amount of records, it is very important that the data is added in an optimum manner.
Let's have a look at the following code:
copyObjects : function(objects) {
var taskModel = null,
taskStore = Ext.getStore('Tasks');
taskStore.removeAll(true);
Ext.Array.each(objects, function (data) {
taskModel = Ext.create('MyApp.model.Task', data);
taskModel.setDirty(true);
taskStore.add(taskModel);
});
taskStore.sync();
}
In the above example, 100 objects are added. Tested on a Samsung Galaxy II, the execution takes 12 to 14 seconds. It simply takes too long!
After further testing, I found out that the add function takes so much time (
http://docs.sencha.com/touch/2.3.1/source/Store.html # Ext-data-store-insert method). Therefore, the solution is to call this function as less as possible. This can be done with a temporary array:
copyObjects : function(objects) {
var taskModel = null,
taskStore = Ext.getStore('Tasks'),
tmp = new Array();
taskStore.removeAll(true);
Ext.Array.each(objects, function (data) {
taskModel = Ext.create('MyApp.model.Task', data);
taskModel.setDirty(true);
tmp.push(taskModel)
});
taskStore.add(tmp);
taskStore.sync();
}
The execution time takes only one second now.
Advice: Pay attention that your list is not too long, because the scrolling performance will go down as well.
Thursday, February 13, 2014
