移动web应用程序性能问题

我正在构建一个移动web应用程序，尽管我仍处于原型开发过程中，但我很难修复某些性能问题。移动web应用程序性能问题

应用程序本身（在桌面浏览器中工作都很流畅，但在移动Safari中显着缓慢）：Hancards webapp prototype。您可以登录为mifeng：wangwang或创建一个新用户。

虽然除了一件事情之外，总体笨拙的表现仍然可以容忍：当您打开一个设置页面时，浏览器崩溃（！），点击'view'（放大所有卡片），然后尝试返回上一个页。

steps

在“视图”被窃听是被执行的代码是这样的（非常本身不景气以及;任何方式，以改善它？）：

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'); 
}

而另一件事，一很奇怪的错误。通常情况下，'每日一词'模块不会显示最后一个元素（<div class="meaning">）的文本节点，即使它在代码中。文本不会显示，除非你无论如何'摇动'DOM（取消选中并勾选相关CSS属性之一也可以实现这一点）。这发生在桌面和移动Safari浏览器中。

，在那里写它的代码是这样的：

// 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

我不指望你来指点我如何解决整个应用程序的性能（我可能会修改项目的总体范围而不是试图找到解决方法），但我至少想看看如何解决这两个问题。谢谢！

来源

2011-09-06 Arnold

我在脚本中看到的唯一性能问题是wrap/unwrap调用 - 从DOM中添加和移除元素往往相当缓慢，并且您可能通过始终拥有wrapper元素并更改其元素来获得相同的效果而不是添加或删除它。

但是，你所看到的性能问题是最有可能在你的CSS：

3D变换可以比2D由于硬件加速更快。它看起来像你已经有了这个，但你需要小心它应用于哪些元素
阴影有真正的性能问题，特别是在动画时。删除它们可能会解决大部分的缓慢问题。
重新排列背景图像可以提供帮助 - 透明页面下的单个背景图像比每个页面具有背景图像更快。

来源

2011-09-09 03:06:03

移动web应用程序性能问题

回答

相关问题