移动 Safari 崩溃（内存不足）

Question

我遇到了一个问题，在我们的site 加载后，iPad 和 iPhone 上的移动 Safari 崩溃。 此处发现的不同建议并未导致任何解决方案。以下是我尝试过的事情：

• 删除 -webkit-transition 元素
• 删除自定义字体
• 关闭方向改变事件
• 关闭谷歌地图
• 关闭砌体插件

同时应用所有这些也无济于事 - 在 Investor Relations 页面上将方向切换为水平时，Safari 崩溃，尽管此页面上的脚本和数据不多。之前正在调查此问题的其他人发现表格可能会导致这种情况。但是，考虑到浏览器即使在没有表格的页面上也会崩溃......

所以我的想法已经用完了。也许有人有其他建议？

Answer 1

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

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 元素，但您也可以通过在切换使元素可见的类上设置它们来避免代价高昂的效果，设置 @ 987654323@ 并在 JavaScript 等中切换它。