移动网络应用性能问题

Question

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

应用程序本身（在桌面浏览器中运行一切顺利，但在移动 Safari 中运行明显缓慢）： Hancards webapp 原型。您可以使用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');
}

还有一件事，一个非常奇怪的错误。很多时候，“每日一词”块不会显示最后一个元素的文本节点 (

)，即使它在代码中也是如此。无论如何，除非您“摇动”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

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

但是，您看到的性能问题很可能出现在 css 中：

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