Mobile webapp performance issues

I’m building a mobile web application, and even though I’m still in a prototyping kind of the process, I’m having a hard time fixing certain performance problems.

The application itself (works all smooth in desktop browsers, but significantly sluggish in Mobile Safari): Hancards webapp prototype. You may login as mifeng:wangwang or create a new user.

The overall clumsy performance could be tolerable though, except for one thing: the browser simply crashes (!) when you open a set page, tap ‘view’ (enlarge all cards) and then try to go back to the previous page.

The code that gets executed when ‘view’ is tapped is this (very sluggish by itself as well; any way to improve it?):

if ($(this).hasClass('big')) {
    $('.card').unwrap().removeClass('big flippable').addClass('small');
    $(this).removeClass('big');
}
else {
    $('.card').wrap('<div class="bigCardWrap" />').removeClass('smal开发者_如何学编程l').addClass('big flippable');
    $(this).addClass('big');
}

And another thing, a pretty weird bug. Very often the ‘word of the day‘ block won’t display the text node for the last element (<div class="meaning">), even though it’s in the code. The text will not show unless you ‘shake’ the DOM anyhow (unticking and ticking back one of the associated CSS properties can also achieve that). This happens in both desktop and mobile Safari browsers.

The code that writes it in there is this:

// While we are here, also display the Word of the day
$.post('ajax.php', {action: 'stuff:showWotd'}, function(data) {

    // Decode the received data
    var msg = decodeResponse(data);

    // Insert the values
    $('.wotd .hanzi').text(msg.content[0]['hanzi']);
    $('.wotd .pinyin').text(msg.content[0]['pinyin']);
    $('.wotd .meaning').text(msg.content[0]['meaning']);

});

I don’t expect you to advice me on how to fix the performance of the whole application (I will probably have to revise the overall scope of the project instead of trying to find workarounds), but I at least would like to see how to solve these two problems. Thank you!

The only performance issue I see in the script is the wrap/unwrap calls - adding and removing elements from the DOM tends to be fairly slow, and you can probably get the same effect by always having a wrapper element and changing its class rather than adding or removing it.

However, the performance issues you are seeing are most likely in your css:

• 3D transforms can be much faster than 2D due to hardware acceleration. It looks like you already have this, though you do need to be careful about which elements it is applied to
• Shadows have real performance issues, especially when animated. Removing them will probably fix most of the slowness.
• Rearranging background images can help - A single background image under transparent pages is faster than having a background image for each page.