Adding items to listviews on a4.1 is too slow #1424

Closed
stickybun opened this Issue Apr 11, 2011 · 4 comments

Comments

Projects
None yet
3 participants
@stickybun

Adding items, and then refreshing a listview a4.1 on an iPhone4/4.3.1 is too slow. Even since commit 0ef9545
This was not the case on a3.

To recreate click 'double list' button on the following links to double a list of 20, and then 40.
a3: http://jsbin.com/evemo4 takes 113ms, 228ms
a4.1+: http://jsbin.com/exuwe3/2 takes 1700ms, 6460ms

@jblas

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Apr 12, 2011

Contributor

Ok, I found the source of the slow down. It's due to this little nugget in listview's _itemApply():

    $list.find( "li" ).find( ">img:eq(0), >:first>img:eq(0)" ).addClass( "ui-li-thumb" ).each(function() {
        $( this ).closest( "li" ).addClass( $(this).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
    });

For every list item, we're traversing the entire list to find all the first images of an li. Not really sure what this is about.

Contributor

jblas commented Apr 12, 2011

Ok, I found the source of the slow down. It's due to this little nugget in listview's _itemApply():

    $list.find( "li" ).find( ">img:eq(0), >:first>img:eq(0)" ).addClass( "ui-li-thumb" ).each(function() {
        $( this ).closest( "li" ).addClass( $(this).is( ".ui-li-icon" ) ? "ui-li-has-icon" : "ui-li-has-thumb" );
    });

For every list item, we're traversing the entire list to find all the first images of an li. Not really sure what this is about.

@jblas

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Apr 12, 2011

Contributor

I'll need to find out if this was what was really meant:

    item.children("img:eq(0)").add(item.children(":first > img:eq(0)")).addClass( "ui-li-thumb" ).each(function() {
        item.addClass( $(this).hasClass("ui-li-icon") ? "ui-li-has-icon" : "ui-li-has-thumb" );
    });

Replacing the code in question with the code above, gets things into the ballpark of 1.0a3.

Contributor

jblas commented Apr 12, 2011

I'll need to find out if this was what was really meant:

    item.children("img:eq(0)").add(item.children(":first > img:eq(0)")).addClass( "ui-li-thumb" ).each(function() {
        item.addClass( $(this).hasClass("ui-li-icon") ? "ui-li-has-icon" : "ui-li-has-thumb" );
    });

Replacing the code in question with the code above, gets things into the ballpark of 1.0a3.

@ghost ghost assigned jblas Apr 12, 2011

@jblas

This comment has been minimized.

Show comment
Hide comment
@jblas

jblas Apr 12, 2011

Contributor

Landed some changes that should make things better:

98dc036

Contributor

jblas commented Apr 12, 2011

Landed some changes that should make things better:

98dc036

@jblas jblas closed this Apr 12, 2011

@CrushYar

This comment has been minimized.

Show comment
Hide comment
@CrushYar

CrushYar Apr 13, 2011

I load data for list using ajax and after call listview('refresh'); ui-li-has-icon class not applied for items with
before this cpommit only first item was rendered without ui-li-has-icon

I load data for list using ajax and after call listview('refresh'); ui-li-has-icon class not applied for items with
before this cpommit only first item was rendered without ui-li-has-icon

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment