移动版Safari崩溃（内存不足）

Question

我遇到了一个问题，在加载我们的site后，iPad和iPhone上的移动版Safari都崩溃了。 这里发现的不同建议并没有导致任何解决方案。这里有事情，我已经试过：

• 删除-webkit-过渡元素
• 删除自定义字体
• 关闭orientationchange事件
• 关闭谷歌地图
• 关闭砖石插件

在同一时间应用它们都没有帮助 - 当在上将方向切换为水平时页面，Safari崩溃，虽然在此页面上没有太多脚本和数据。另外一个正在研究这个问题的人发现，表格可能会导致这种情况。但是，考虑到即使在没有表格的页面上浏览器也会崩溃...

因此，我在这里用完了想法。也许有人有其他建议？

Answer 1

您还应该看看您对动画和绝对/固定位置的使用：这些CSS属性中的每一个都会创建一个新的堆叠上下文，这会导致Mobile Safari为元素创建单独的图层。搜索“堆积语境”，你会发现许多的功能创建新图层：

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

层往往是性能不错，但他们需要记忆。在enable Web Inspector for iOS之后，您可以打开Web Inspector并使用图层侧栏查看每个单独的图层及其内存消耗情况。您的网站目前需要iPhone 4S上的50 + MB，这绝对是进入崩溃领域。

避免这种情况的最佳方法不是为所有不可见的功能创建DOM元素，但您也可以通过将其设置在触发器使其可见的类上进行设置来避免昂贵的效果， visibility: hidden并在JavaScript中进行切换等。