iPad 对 Canvas 标签的限制；画布标签动画上的网页崩溃

Posted 2023-03-12

【中文标题】iPad 对 Canvas 标签的限制；画布标签动画上的网页崩溃

【英文标题】：iPad Limitations on Canvas Tag; Webpage Crashses on Canvas Tag Animation

【发布时间】：2011-05-03 22:09:01

【问题描述】：

有谁知道iPad对canvas标签有什么限制吗？

目前，我正在制作一个使用翻书和音频标签组合来模拟内嵌视频内容的广告素材。动画被绘制到画布元素并与正在播放的音频内容同步。当有人点击下面的四个按钮时，会播放 4 个短视频片段。

http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungfupanda2_test/

我遇到的问题是在 iPad 上。播放了一些动画后，移动 safari 突然崩溃了。当我在 iPhone 上播放时，它从未发生过，但每次在 iPad 上都会发生。它也不是一个特定的动画，因为如果我单击不同的按钮组合，它崩溃的上一个剪辑可以正常播放，然后它决定在另一个剪辑上崩溃。

我认为问题可能与 Safari 提供的单个页面视图的内存量有关。我发现一篇博文很好地解释了这个问题。

http://roblaplaca.com/blog/2010/05/05/ipad-safari-image-limit-workaround/

根据该帖子，一旦移动 Safari 达到特定的内存阈值，图像就会开始返回空白。这与我目前的发现一致。我正在测试这一切的 iPad 正在运行 ios 3.2.1（在有人告诉我我应该向我的老板解释没有人再使用 3.X 之前，我尝试过......他们仍然希望我对此进行调查）。我借了一台运行 iOS 4.2.1 的同事 iPad，该设备没有崩溃，但有些图像没有被绘制到画布上。

我很确定它也是 canvas 标签的问题，因为我尝试在不向 canvas 元素绘制任何内容的情况下运行动画，并且页面从未崩溃。

这就是为什么我认为这可能是 Safari 对 canvas 标签的支持的限制。当然，我愿意接受其他人的建议。

【参考方案1】：

再次回答我自己的问题感觉有点奇怪，但我想如果有人对这类问题进行搜索，答案会很有帮助。

我相信我最初的假设是正确的。动画使用的图像总量约为 600+。我认为较旧的 iPad 尽可能多地加载，然后当它耗尽缓存并且画布标签试图绘制不再存在的图像时，它崩溃了。

最终，我们将广告投放到了 iOS 4.2 及更高版本的设备上，因为这些新设备上似乎没有出现问题。此外，我们进一步压缩了图像大小，从而有助于减少我们存储到内存中的图像数量。

如果有人知道 iOS 4.2 或更高版本浏览器中的缓存阈值大约是多少，如果您发表评论，我将不胜感激。只是想知道我可以安全加载多少 KB 的图像数据。