[AC-2794] Serious performance issue with tableviews that contain multiple labels.

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Closed
Resolution	Duplicate
Resolution Date	2011-10-20T11:59:04.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Titanium SDK & CLI
Labels	performance, tableview
Reporter	Jude Osborn
Assignee	Paul Dowsett
Created	2011-10-04T21:58:23.000+0000
Updated	2016-03-08T07:47:42.000+0000

Description

I've run into serious performance issues with the TableView, when its rows become a bit more complex, containing a few positioned labels. Scrolling is extremely laggy -- especially the first time a row comes in to view. While I understand that a great deal of fine tuning and care must go in to a table to ensure it performs well, basic table scroll performance is still way, way below other native apps, such as Ebay or Facebook. This is a serious issue for our company. I'm including source that is reproducible on an iPhone device. This performance issue can also be plainly seen in the app GetGlue. Scrolling a long list of rows is extremely jerky and laggy compared to any other similar native iPhoen app, giving the Titanium app a non-native feel. It appears to be some kind of caching issue, because once rows come in to view the table is considerably more responsive. I'm using SDK 1.7.3 and Xcode 3.2.6, and testing on an iPhone 3 and iPhone 4. Example code below. Performance can only be detected on an iPhone device, and is especially apparent the first time the app is opened and the table is scrolled.

var win = Ti.UI.createWindow({  
    title:'Test',
});
 
var tableView = Ti.UI.createTableView({
    minRowHeight: 75
});
win.add(tableView);
 
var rows = [];
for (var i = 0; i < 35; i++) {
    rows.push(createRow());
}
 
function createRow() {
    var row = Ti.UI.createTableViewRow({
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        className: 'className',
        layout: 'horizontal'
    });
 
    // Main left container.
    var leftView = Ti.UI.createView({
        left: 10,
        top: 10,
        bottom: 0,
        width: 220
    });
    row.add(leftView);
 
    leftView.add(Ti.UI.createView({
        top: 0,
        left: 0,
        height: 16,
        width: 16,
        backgroundImage: 'images/test.png'
    }));
 
    leftView.add(Ti.UI.createLabel({
        text: 'Big font, longer text',
        top: 0,
        height: 20,
        width: 'auto',
        left: 25,
        font: {fontSize: 16, fontWeight: 'bold'}
    }));
 
    leftView.add(Ti.UI.createLabel({
        text: 'Small 1',
        top: 25,
        left: 25,
        height: 15,
        font: {fontSize: 12, fontWeight: 'bold'}
    }));
 
    leftView.add(Ti.UI.createLabel({
        text: 'Small 2',
        top: 40,
        left: 25,
        height: 15,
        font: {fontSize: 12}
    }));
 
    leftView.add(Ti.UI.createLabel({
        text: 'Small 3',
        top: 25,
        right: 0,
        height: 15,
        font: {fontSize: 12, fontWeight: 'bold'},
        width: 'auto'
    }));
 
    leftView.add(Ti.UI.createLabel({
        text: 'Small 4',
        top: 40,
        right: 0,
        height: 15,
        font: {fontSize: 12},
        width: 'auto'
    }));
 
    var rightView = Ti.UI.createView({
        left: 20,
        top: 10,
        bottom: 0,
        width: 'auto'
    });
    row.add(rightView);
 
    rightView.add(Ti.UI.createLabel({
        text: 'Small 4',
        top: 0,
        height: 20,
        width: 'auto',
        font: {fontSize: 13, fontWeight: 'bold'},
        textAlign: 'right'
    }));
 
    rightView.add(Ti.UI.createLabel({
        text: 'BIG',
        top: 20,
        height: 30,
        width: 'auto',
        font: {fontSize: 30, fontWeight: 'bold'}
    }));
 
    return row;
}
 
tableView.setData(rows);
 
win.open();

Comments

Anthony Decena 2011-10-20
Paul Dowsett 2011-12-27

Closing resolved tickets due to inactivity.

JSON Source