iOS上的Mobile Safari在大页面上崩溃

时间:2012-08-06 15:37:22

标签: javascript css debugging mobile-safari

我遇到一个问题,当页面变得太大时,在使用jQuery加载和操作DOM时,Mobile Safari会崩溃。

我在iPhone和iPad上都遇到同样的问题。

对移动网页进行问题排查以查找错误的最佳方法是什么?是否存在可能导致Mobile Safari崩溃的已知问题?

7 个答案:

答案 0 :(得分:27)

我实际上发现了这个问题。我想的不是JS,而是CSS。我添加了一个类来进行CSS转换以淡化某些元素。对于匿名用户,这些元素具有display: none;,并且可能永远不会运行不透明度过渡。

奇怪的是,过渡恰好是两个元素。那么为什么这只会在100多条评论的长线程上崩溃?

所以底线是:-webkit-transition在移动safari上崩溃了页面。

答案 1 :(得分:21)

有同样的问题,对我而言-webkit-transform: translateZ(0);导致了Safari的崩溃。

答案 2 :(得分:19)

我知道这个问题已经成功回答了,但我只是想把我的五美分放进去,因为我已经在这个问题上撞了一下墙了很多次:

正如大多数答案已经指出的那样,它通常归结为记忆问题。几乎任何东西都可能是最后一点,最后提示“记忆堆”,就像translateZ或其他任何东西。

但是根据我的经验,它与特定的实际CSS(或JS)命令无关。恰好是最后一次过渡太过分了。

对我来说很有帮助的是在display: none下保留目前看不到的任何内容。这可能听起来很原始但实际上可以解决问题。这是告诉浏览器渲染器此时不需要此元素并因此释放内存的简单方法。这允许您创建具有各种3d效果的英里长垂直滚动条,只要您隐藏此时未使用的元素即可。

答案 3 :(得分:12)

任何iOS应用程序的主要问题是内存使用情况。因此,您的网页可能使用了太多内存。

Mobile Safari使用一些聪明的技术,这样在任何给定的时间内,整个页面都不能驻留在内存中,而只是其中的一部分。也许你可以检查一下页面中的任何内容是否会使这种机制失效或使其效率降低。

在任何情况下,为了更多地提供点建议,有关您网页的更多信息会非常棒。

顺便说一下,您可以从设备存储的崩溃日志中获得一些提示。检查是否可以在“设置”下找到它:

  1. 一般
  2. 关于
  3. 诊断&使用
  4. 诊断&使用数据
  5. 如果是内存问题,你应该找到类似“signal(0)”的内容;不确定这是否仅仅意味着“因内存使用而死亡”,但我通常认为当我找到一个信号(0)时这是理所当然的。

    否则,它可能会告诉你出了什么问题......

    希望这有帮助。

答案 4 :(得分:3)

内存限制和Javascript执行时间限制,尽管它实际上如何击中它们有点模糊。常见报告称,大小超过10MB的页面会出现问题,Javascript执行时间限制为10秒。

有关详细信息,请参阅Apple's documentation

答案 5 :(得分:1)

我最近遇到了一个问题,即移动Safari会在包含大量图片(30多个已足够)的网页应用页面上崩溃,并且菜单会有一些转换。经过大量的反复试验,我找到了类似于LinkedIn的解决方案,但是使用angularjs进行无限滚动。我在列表的顶部和底部使用 requestAnimFrame 和两个展开/缩小div (带有js样式属性)来删除所有图像容器(其他内容覆盖在顶部)除了一些靠近视口的。滚动性能(本机,没有js)很好,并且内存消耗受到控制。

答案 6 :(得分:0)

我遇到了类似的问题,网页就像Android设备上的魅力一样,在IOS(iphone和模拟器)上崩溃。

经过大量研究(使用ios_webkit_debug_proxy)后,我发现问题与jQuery ready事件有关。

添加一点暂停解决了这个问题。我的申请也使用了iframe。

$(document).ready(function () {
    window.setTimeout(function () { ready(); }, 10);
});