我知道标题没有那么解释性,但故事是这样的:我正在开发一个浏览器游戏,主要使用 JavaScript 和 Mapbox 库。
在台式机、Android 和 iOS 上一切正常,但在 iOS 上出现了一个问题:让游戏运行几分钟后,手机突然开始出现图形伪影并显示大部分文字乱码。
https://i.stack.imgur.com/oXX4k.jpg
我的问题是:我的代码中究竟是什么导致了这种情况?内存泄漏? (LE:结果实际上是内存泄漏)真正的问题是:你怎么会通过简单的浏览网页几乎可以将整个手机变砖? Safari 不应该阻止这个,或者至少是 iOS 吗?
这不是这个特定设备的问题,因为这个问题可以在不同的 iPhone 设备上重现。 (我不太确定不同的 iOS 版本)。
我如何重现错误:
打开游戏(在 Safari 中)。让它运行 3-4 分钟。向下滑动通知中心,一切都变得疯狂。我添加了一段 YouTube 视频,展示了如何重现该错误(在我的 iPhone 5C 上)。似乎问题首先出现在通知中心(如果您从顶部向下滑动菜单)。就目前而言,这个问题似乎只出现在 iPhone 5C iOS 9.2.1 (13D15) 上。它也出现在新的 iOS 9.3 版本上。
为了解决这个问题,我必须:
关闭 Safari 应用程序(其中打开了游戏选项卡)。锁定手机。解锁后一切恢复正常。
关于游戏本身的一些细节:
游戏显示一个 Mapbox 地图和上面的一些单位(标记)。 Node.js 服务器以 1 滴/秒的速度运行,每次滴答后更新的游戏状态通过 Socket.io 发送到浏览器。每次浏览器收到游戏状态时,它都会相应地更新标记。 *如果您放大或缩小或选择它们,游戏也可能会更新标记。
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.
SuperUser
上发布问题而被否决后发布在 SO 上。我希望这被认为是提出这个问题的正确地方。
这种内存泄漏可能是由于“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()在设置超时。
不定期副业成功案例分享