为什么 Safari 页面会破坏 iOS 渲染？

Question

我知道标题没有那么解释性，但故事是这样的：我正在开发一个浏览器游戏，主要使用 JavaScript 和 Mapbox 库。

在桌面、Android 和 iOS 上一切正常，但在 iOS 上出现了一个问题：让游戏运行几分钟后，手机突然开始出现图形伪影，并显示大部分文字乱码。

以下是手机开始时的一些照片：

我的问题是：我的代码中究竟是什么导致了这种情况？内存泄漏？ （LE：原来是内存泄漏）
真正的问题是：你怎么能通过简单的浏览网页就几乎把整个手机都变砖了页？ Safari 不应该阻止这一点，或者至少是 iOS 吗？

这不是这个特定设备的问题，因为这个问题可以在不同的 iPhone 设备上重现。 （我不太确定不同的 iOS 版本）。

我如何重现错误：

1. 打开游戏（在 Safari 中）。
2. 让它运行 3-4 分钟。
3. 向下滑动通知中心，一切都变得疯狂。
   我添加了一个YouTube video，展示了如何重现错误（在我的 iPhone 5C 上）。
   问题似乎首先出现在通知中心（如果您从顶部向下滑动菜单）。
   就目前而言，这个问题似乎只出现在iPhone 5C iOS 9.2.1 (13D15) 上。它也出现在新的 iOS 9.3 版本上。

为了修复这个问题，我必须：

1. 关闭 Safari 应用程序（游戏选项卡在其中打开）。
2. 锁定手机。解锁后一切恢复正常。

关于游戏本身的一些细节：

1. 游戏会显示 Mapbox 地图及其上方的一些单位（标记）。
2. Node.js 服务器以 1 滴答/秒的速度运行，每次滴答后，更新的游戏状态会通过 Socket.io 发送到浏览器。
3. 每次浏览器收到游戏状态时，它都会相应地更新标记。
4. *如果您放大或缩小或选择标记，游戏也可能会更新标记。

EDIT2： 发现内存泄漏（如预期）。修复此泄漏（检查undefined _icon）后，问题不再发生。这意味着，在某些地方触发了 Safari/iOS 错误。

对于每个集群的单元（在 MarkerCluster 中隐藏并与其他单元分组），每个刻度的确切名称如下：

    var $icon = $(marker._icon); // marker._icon is undefined because of the clustering

    $icon.html('');

    $icon.append($('<img class="markerIcon" src="' + options.iconUrl + '" />'));

    var iconX = 10;
    var iconY = -10;
    var iconOffset = 0;

    for(var v in this.icons) {
        this.icons[v].css('z-index', + $icon.css('z-index') + 1);
        this.icons[v].css('transform', 'translate3d(' + iconX + 'px,' 
                                + (iconY + iconOffset) + 'px,' + '0px)');
        iconOffset += 20;

        this.icons[v].appendTo($icon);
    }

    // Fire rate icons
    this.attackRateCircle = $('<div class="circle"></div>');
    this.attackRateCircle.circleProgress({
        value: 0,
        size: 16,
        fill: { color: "#b5deff" },
        emptyFill: 'rgba(0, 0, 0, 0.5)',
        startAngle:  -Math.PI / 2,
        thickness: 4,
        animation: false,
    });
    this.attackRateCircle.hide();

    // Create and display the healthbar
    this.healthBar = $('<div>').addClass('healthBar ');
    this.healthBar.css('z-index', $icon.css('z-index'));
    this.healthBarFill = $('<span class="fill">');
    this.healthBar.append(this.healthBarFill);

    $icon.append(this.healthBar);
    $icon.append(this.attackRateCircle);

这是icons 数组：

this.icons = {
    attack_order: $('<img src="img/attack.png" class="status_icon">'),
    attack: $('<img src="img/damage.png" class="status_icon icon_damage">'),
    hit: $('<img src="img/hit.png" class="status_icon icon_hit">'),
};

circleProgress 调用来自这个库：https://github.com/kottenator/jquery-circle-progress

演示

是的，我已经能够创建一个重现错误的 jsFiddle：https://jsfiddle.net/cte55cz7/14/ 在 iPhone 5C 上的 Safari 上打开并等待几分钟。在 iPhone 6 和 iPad mini 上，页面崩溃（正如预期的那样，由于内存泄漏）

Here's the same code in a HasteBin, for anyone who doesn't want to run it.

Answer 1

这种内存泄漏可能是由于“WebKit 的 JS 引擎”的工作方式 [safari webkit-javascript llvm]

而且看起来真的是一个虚拟内存缓冲区溢出，对剩余 RAM 有直接影响（iOS 共享并使用它来存储用户界面图形元素）

相对于这段代码： “[...]查找 jQuery 内存泄漏很容易。检查 $.cache 的大小。如果它太大，请检查它并查看保留哪些条目以及原因。[...]”（http://javascript.info/tutorial/memory-leaks）

让我期待它是相对于这个 for 循环：

for(var v in this.icons) {
    this.icons[v].css('z-index', + $icon.css('z-index') + 1);
    this.icons[v].css('transform', 'translate3d(' + iconX + 'px,' 
                            + (iconY + iconOffset) + 'px,' + '0px)');
    iconOffset += 20;

    this.icons[v].appendTo($icon);
}

假设检查已完成，并且假设您找到了条目，您可能希望使用 removeData() 手动清理数据 或者您可以先使用 $elem.detach() 然后将 $(elem).remove() 放入 setTimeout。