Titanium Appcelerator iPhone App - App crashes when the table view is scrolled close to 1000th record and slows down when it starts scrolling - iphone

Question

We have a sample app that loads 10 records each from the db and shows in a table vioew. The next ten records are taken when the scroll reaches the bottom (like the sample of dynamic scroll view in kitchen sink and following the same sample code). However the app scrolling becomes slower and slower when the no of records increases and then crashes when we were showing close to 1000th record. We have even more records to show (10000) and all the rows shows an 50X50 image and two texts.
if (search.value != null && search.value != ''){
dbrows = db.execute('select id, name, scientificname from siteRecords where name like \'%' + search.value + '%\' order by commonname limit 10 offset ' + lastRow);
}else{
dbrows = db.execute('select id, name, scientificname from siteRecords order by name limit 10 offset ' + lastRow);
}
tsEnd = new Date;
var duration = tsBegin.getTime() - tsEnd.getTime();
perfTableView.appendRow({title:"To fetch the record from 0 to " + (lastRow + 20) + " took: " + duration + " ms"});
tsBegin = new Date;
var rowCount = 0;
while (dbrows.isValidRow()) {
var row;
if( dbrows.fieldByName('name')[0] != curheader || initHeader == 0){
initHeader = 1;
curheader = dbrows.fieldByName('name')[0];
row = Ti.UI.createTableViewRow({height:55,backgroundColor:'#ffffff',backgroundSelectedColor:'#eeee33',hasChild:true,className:'birds',header:curheader});
index.push({title:curheader,index:rowNumber });
} else {
row = Ti.UI.createTableViewRow({height:55,backgroundColor:'#ffffff',backgroundSelectedColor:'#eeee33',hasChild:true,className:'birds'});
}
var lblBirdID = Ti.UI.createLabel({
text: dbrows.fieldByName('id'),
color: '#000000',
textAlign:'left',
left:4,
top:8,
height:100,
font:{fontWeight:'bold',fontSize:10},
visible:false
});
row.add(lblBirdID);
media = dbrows.fieldByName('scientificname').replace(' ', '_') + '.jpg';
var path = Titanium.Filesystem.resourcesDirectory + 'Birds/images/'
if (Titanium.Filesystem.getFile(path,media).exists())
{
var f;
if (isAndroid){
f = '../images/' + media;
}else{
f = Ti.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory,'Birds/images/' + media);
}
var imgBird = Ti.UI.createImageView({
image:f,
left:4,
height:50,
width:50
});
row.add(imgBird);
}else{
var f;
if (isAndroid){
f = '../images/no_bird.jpg';
}else{
f = f = Ti.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory,'Birds/images/no_bird.jpg');
}
var imgBird = Ti.UI.createImageView({
image:f,
left:4,
height:50,
width:50
});
row.add(imgBird);
}
var lblBirdName = Ti.UI.createLabel({
text: dbrows.fieldByName('name'),
color: '#000000',
textAlign:'left',
left:60,
top:8,
height:20,
font:{fontWeight:'bold',fontSize:16}
});
row.add(lblBirdName);
var lblBirdScientificName = Ti.UI.createLabel({
text: dbrows.fieldByName('scientificname'),
color: '#000000',
textAlign:'left',
left:60,
top:26,
height:20,
font:{fontSize:11}
});
row.add(lblBirdScientificName);
birdRows[rowNumber] = row;
rowCount = rowCount + 1;
rowNumber = rowNumber + 1;
dbrows.next();
}
dbrows.close();
db.close();
if (rowCount == 20){
lastRow = lastRow + 20;
}else{
lastRow = lastRow + rowCount;
}
birdTableView.setData(birdRows);
birdTableView.index = index;
tsEnd = new Date;
duration = tsBegin.getTime() - tsEnd.getTime();
perfTableView.appendRow({title:"To loop through the DB rows and to create table rows took: " + duration + " ms"});
}

Answer 1

Have you tried unloading items at the top, as items are added to the bottom (and vice versa)? Doing something like this would mean there are never more than say 100 rows at any one time.
Also, if possible, use a standard row instead of a custom row. A standard row is MUCH more performant than a custom one.