我有一个问题,当页面变得太大时,Mobile Safari 在使用 jQuery 加载和操作 DOM 时崩溃。
我在 iPhone 和 iPad 上都遇到了同样的问题。
对移动页面进行故障排除以查找错误的最佳方法是什么?是否存在任何可能导致 Mobile Safari 崩溃的已知问题?
我有一个问题,当页面变得太大时,Mobile Safari 在使用 jQuery 加载和操作 DOM 时崩溃。
我在 iPhone 和 iPad 上都遇到了同样的问题。
对移动页面进行故障排除以查找错误的最佳方法是什么?是否存在任何可能导致 Mobile Safari 崩溃的已知问题?
我确实发现了问题。我想的不是 JS,而是 CSS。我添加了类以使 CSS 过渡以淡入某些元素。对于匿名用户,这些元素已经display: none;
并且可能从未运行过不透明度转换。
奇怪的是,转换正好在两个元素上。那么为什么这只会在有 100 多条评论的长线程上崩溃呢?
所以底线是:-webkit-transition 在移动 safari 上崩溃了页面。
有同样的问题,对我来说是-webkit-transform: translateZ(0);
导致 Safari 崩溃的原因。
我知道这个问题已经得到了成功的回答,但我也只是想投入我的五分钱,因为我已经多次将头撞在墙上了:
正如大多数答案已经指出的那样,它通常归结为内存问题。几乎任何东西都可能是最终翻过“内存堆”的最后一点,就像 atranslateZ
或其他任何东西一样。
然而,根据我的经验,它与具体的实际 CSS(或 JS)命令无关。只是碰巧最后一次过渡太多了。
对我有很大帮助的是将此时不可见的任何内容保留在display: none
. 这听起来可能很原始,但实际上可以解决问题。这是告诉浏览器的渲染器您此时不需要此元素并因此释放内存的简单方法。这允许您创建具有各种 3d 效果的一英里长的垂直滚动条,只要您隐藏您目前不使用的元素。
任何 iOS 应用程序的主要问题是内存使用。因此,您的页面很可能使用了过多的内存。
Mobile Safari 使用了一些巧妙的技术,因此在任何给定时间都不必将整个页面都驻留在内存中,而只是其中的一部分。也许您可以检查页面中是否有任何内容破坏了这种机制或降低了它的效率。
无论如何,要给出更多中肯的建议,有关您的页面的更多信息将非常棒。
顺便说一句,您可以从设备存储的崩溃日志中获得一些提示。检查是否可以在“设置”下找到它:
如果是内存问题,你应该找到类似“信号(0)”的东西;不确定这是否仅意味着“由于内存使用而被杀死”,但是当我发现信号(0)时,我通常认为这是理所当然的。
否则,它可能会告诉你什么是错的......
希望这可以帮助。
内存限制和 Javascript 执行时间限制都存在,尽管您实际上如何达到这些限制有点模糊。常见的报告是,大小大于 10MB 的页面会出现问题,并且 Javascript 的执行时间限制为 10 秒。
有关详细信息,请参阅Apple 的文档。
我最近遇到了一个问题,移动 safari 在包含大量图像(30 多个就足够了)和一些菜单转换的 web 应用程序页面上崩溃。经过大量试验和错误后,我采用了类似于LinkedIn所做的解决方案,但使用 angularjs 进行无限滚动。我在列表的顶部和底部使用requestAnimFrame和两个扩展/收缩 div(具有 js 样式属性)来删除所有图像容器(顶部覆盖有其他东西),除了靠近视口的一些容器。滚动性能(本机,无 js)很好,内存消耗也在检查中。
我有一个类似的问题,网页在 android 设备上运行起来就像一个魅力,在 IOS(iphone 和模拟器)上崩溃了。
经过大量研究(也使用 ios_webkit_debug_proxy),我发现问题与 jQuery 就绪事件有关。
添加一点超时解决了这个问题。我的应用程序也在使用 iframe。
$(document).ready(function () {
window.setTimeout(function () { ready(); }, 10);
});