移动Web应用程序性能问题

Question

我正在构建一个移动Web应用程序，即使我仍处于原型设计过程中，但我很难解决某些性能问题。

应用程序本身（在桌面浏览器中运行顺畅，但在Mobile Safari中显着缓慢）：Hancards webapp prototype。您可以以mifeng：wangwang登录或创建新用户。

总体笨拙的表现虽然可以容忍，但有一件事情：浏览器只是在打开设置页面时崩溃（！），点击“查看”（放大所有卡片），然后尝试返回上一页

点击'view'时执行的代码是这样的（自身也非常缓慢;有什么方法可以改进它吗？）：

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

});

我不指望你就如何修复整个应用程序的性能向我提出建议（我可能不得不修改项目的整体范围而不是试图找到解决方法），但我至少想要看看如何解决这两个问题。谢谢！

Answer 1

我在脚本中看到的唯一性能问题是wrap / unwrap调用 - 从DOM中添加和删除元素往往相当慢，并且你可以通过总是拥有一个包装器元素并改变它的类来获得相同的效果而不是添加或删除它。

但是，您看到的性能问题最有可能出现在您的CSS中：

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