当页面过大时,使用jQuery加载和操作DOM时,移动版Safari会崩溃。
我在iPhone和iPad上都遇到了同样的问题。
有什么最好的方法来排除移动页面中的错误?是否存在已知的可能导致Mobile Safari崩溃的问题?
当页面过大时,使用jQuery加载和操作DOM时,移动版Safari会崩溃。
我在iPhone和iPad上都遇到了同样的问题。
有什么最好的方法来排除移动页面中的错误?是否存在已知的可能导致Mobile Safari崩溃的问题?
我实际上已经找到了问题所在,它并不是我之前以为的JS问题,而是CSS。我添加了一个类来使一些元素淡入淡出,对于匿名用户,这些元素有 display:none;
属性,可能从未运行过透明度过渡效果。
奇怪的是,这些过渡效果只应用到两个元素上。那么为什么只有在拥有100多条评论的长线程上才会崩溃呢?
因此,最终结论是:-webkit-transition 在移动版safari中导致了页面崩溃。
我遇到了同样的问题,对我来说,是-webkit-transform: translateZ(0);
导致Safari崩溃。
我知道这个问题已经被成功回答了,但我也想做出自己的贡献,因为我在这个问题上已经碰壁很多次:
正如大多数答案已经指出的那样,问题通常归结于内存问题。几乎任何东西都可能成为最后一根稻草,最终使"内存堆"溢出,就像 translateZ
或其他任何东西一样。
然而,在我的经验中,这与具体的CSS(或JS)命令无关。它只是恰好是最后一个转换过渡造成了问题。
对我有帮助的方法是将此时不可见的任何内容保留为 display: none
。这听起来可能很原始,但实际上是行之有效的。这是告诉浏览器的渲染器你现在不需要这个元素,从而释放内存的简单方式。这允许您创建各种3D效果的里程碑式垂直滚动条,只要在这个时间隐藏您不使用的元素即可。
任何iOS应用程序的主要问题是内存使用。因此,很可能您的页面正在使用过多的内存。
移动Safari使用一些巧妙的技术,以便在任何给定时间,只有部分页面需要驻留在内存中。也许您可以检查一下您的页面是否有任何东西会破坏这种机制或者使其效果不佳。
无论如何,为了提供更加切实可行的建议,了解更多关于您的页面的信息将非常有帮助。
顺便说一句,您可以从设备存储的崩溃日志中获取一些提示。请检查是否可以在“设置”中找到:
如果这是一个内存问题,您应该会找到类似“信号(0)”的内容;不确定这是否仅意味着“由于内存使用而被终止”,但当我发现信号(0)时,我通常认为它是这样的。
否则,它可能会告诉您出了什么问题......
希望这能有所帮助。
虽然内存限制和JavaScript执行时间限制存在,但实际上可能很难遇到这些限制。普遍报道称,页面大小超过10MB会有问题,并且JavaScript执行时间限制为10秒。
有关更多信息,请参见苹果公司的文档。
我最近遇到了一个问题,移动版Safari在包含大量图片(30张以上)和菜单变换的Web应用页面上崩溃。经过多次尝试,我采用了类似LinkedIn的解决方案,但使用angularjs进行无限滚动。我在列表顶部和底部使用了requestAnimFrame和两个扩展/缩小的div(带有js样式属性),以删除除了一些靠近视口的图像容器(上面覆盖了其他东西)之外的所有图像容器。滚动性能(本机,无js)良好,内存消耗也得到了控制。
我曾经遇到过类似的问题,我的网页在安卓设备上运行得很完美,在 IOS(iPhone 和模拟器)上会崩溃。
经过大量研究(还使用了 ios_webkit_debug_proxy),我发现这个问题与 jQuery 的 ready 事件有关。
稍作延迟后,问题得以解决。我的应用程序也使用了 iframe。
$(document).ready(function () {
window.setTimeout(function () { ready(); }, 10);
});
ios_webkit_debug_proxy
,这是一个很棒的项目! - ken稍微做出贡献:当我使用 CSS 的 filter: grayscale
时,就发生了这种情况。有趣的是,我在使用 filter: brightness
时没有问题。真是难以理解。