Home/ Questions/Q 6544649
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T11:29:28+00:00

I’m building a mobile web application, and even though I’m still in a prototyping

  • 0

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.

steps

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('small').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']);

});

mysterious text node

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.
    • 0