Performance 移动webapp性能问题

我正在构建一个移动web应用程序，尽管我仍处于原型制作过程中，但我很难解决某些性能问题

应用程序本身（在桌面浏览器中运行平稳，但在移动Safari中运行缓慢）：。您可以登录为

mifeng

：

wangwang

或创建新用户

不过，整体笨拙的性能还是可以忍受的，除了一件事：当你打开一个设置页面时，点击“查看”（放大所有卡片），然后尝试返回上一页，浏览器就会崩溃（！）

点击“视图”时执行的代码是这样的（本身也非常缓慢；有什么方法可以改进它吗？）

if（$（this）.hasClass（'big'））{
$（'.card'）.unwrap（）.removeClass（'big flipable'）.addClass（'small'）；
$（this.removeClass（'big'）；
}
否则{
$（'.card'）.wrap（'.removeClass（'small'）.addClass（'big flipable'）；
$（this.addClass（'big'）；
}

还有一件事，一个很奇怪的虫子。通常，“每日单词”块不会显示最后一个元素（

）的文本节点，即使它位于代码中。除非您“摇动”DOM，否则文本不会显示（取消勾选并勾选一个相关CSS属性也可以实现这一点）。这在桌面和移动Safari浏览器中都会发生

将其写入其中的代码如下所示：

//当我们在这里时，还可以显示当天的单词
$.post（'ajax.php'，{action:'stuff:showWotd'}，函数（数据）{
//对接收到的数据进行解码
var msg=解码响应（数据）；
//插入值
$（'.wotd.hanzi'）.text（msg.content[0]['hanzi']）；
$（'.wotd.pinyin'）.text（msg.content[0]['pinyin']）；
$（'.wotd.meaning'）.text（msg.content[0]['meaning']）；
});

---

我不希望您就如何修复整个应用程序的性能向我提供建议（我可能需要修改项目的总体范围，而不是试图找到解决方法），但我至少希望看到如何解决这两个问题。谢谢大家!

我在脚本中看到的唯一性能问题是wrap/unwrap调用——从DOM中添加和删除元素的速度往往相当慢，如果始终使用wrapper元素并更改其类，而不是添加或删除它，则可能会获得相同的效果

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

• 由于硬件加速，3D变换比2D变换快得多。看起来您已经有了它，不过您确实需要注意它应用于哪些元素
• 阴影具有真实的性能问题，尤其是在设置动画时。移除它们可能会修复大部分的慢度
• 重新排列背景图像会有所帮助-透明页面下的单个背景图像比每个页面都有一个背景图像要快