在加载 200mb 的新图像()后，Javascript 在 Safari/iPad2 中运行缓慢。为什么会这样？

Question

有谁知道为什么将大量外部 JPG/PNG 图像加载到 HTML5 Image() 对象(总计约 200Mb-250Mb)会影响 Javascript 性能。性能似乎也受到缓存的影响。 IE。如果之前浏览的缓存已满(-ish)，则当前站点的性能会大大降低。

有2个说我可以粗略地解决它。

1. 手动清除缓存。
2. 最小化浏览器，等待大约 20 秒并重新打开浏览器，之后 iOS/浏览器已回收内存并正常运行 JS。

我原以为 iOS 会回收运行当前任务所需的内存，但似乎没有。另一种解决方法是将 200Mb 的“缓存清除”图像加载到 Image() 对象中，然后通过设置 src = "" 删除这些图像。这似乎确实有帮助，但它不是一个优雅的解决方案......

请帮忙？

Answer 1

首先阅读优秀的 post on LinkedIn Engineering blog .仔细阅读并检查是否有一些优化也可以在您的应用程序中尝试。如果您尝试了所有这些方法，但仍然没有解决您的性能问题，请继续阅读。

---

我假设您的页面上有一些图片库或杂志风格的内容区域

将此图像区域放在单独的 iframe 中如何？ ？那么你可以做的是:

1. 有两个 iframe。只有一个应该及时可见并处于事件状态。

2. 将图像加载到第一个 iframe 中。跟踪加载图像的大小。如果很难跟踪精确尺寸

   numberOfLoadedImages * averageImageSize

   可能是一个很好的近似值。

3. 随着该数字接近某个阈值，开始将当前可见的内容预加载到第二个 iframe 中。
4. 翻转 iframe 的可见性，使第二个 iframe 变为事件状态。
5. 清除第一帧的内容。
6. 必要时重复整个过程。

我不确定这是否适合您，但我希望 iPad 上的 WebKit 引擎能够独立清除帧的内存。

---

编辑:原来你在写游戏。

如果这是一款游戏，我假设您希望屏幕上同时显示许多游戏对象，并且您无法简单地卸载其中的某些部分。以下是针对该案例的一些建议:

1. 不要将 DOM 用于游戏:它太占内存了。幸运的是，您使用的是 canvas已经。
2. 为您的图片添加 Sprite 。图像 Sprite 不仅有助于减少请求数量。它们还可以让您减少 Image 的数量对象并降低每个文件的开销。阅读有关为 canvas 使用 Sprite 的信息IE blog 上的动画.
3. 优化您的图片。有几种图像文件大小优化器。 SmushIt是其中之一。试试你的图像。注意 this great series by Stoyan Stefanov at YUI blog 中讨论的其他技术.
4. 尝试矢量图形。 SVG 很棒而且 canvg可以在 Canvas 上绘制它。
5. 尝试简化您的游戏世界。也许某些背景对象不需要那么详细。或者，也许您可​​以为他们使用更少的 Sprite 。或者，您可以对同一组的不同对象使用图像过滤器和蒙版。就像 Dave Newton 所说的那样，iPad 是一款非常受限的设备，您很可能会使用质量相对较低的 sprite。

这些都是与减少您必须加载的数据有关的建议。其他一些可能对您有用的建议。

1. 预加载您将需要的图像并卸载您不再需要的图像。如果您的游戏有“关卡”或“任务”，则仅加载当前游戏所需的 Sprite 。
2. 首先尝试加载“流行”图片，然后在后台下载剩余的图片。您可以使用单独的 <iframe>为此，您的主游戏循环不会被下载中断。 您还可以使用 cross-frame messaging为了协调您的下载框架。
3. 您可以将最流行的图像存储在 localStorage 中, Application Cache和 WebSQL .它们每个可以为您提供 5 MB 的存储空间。这是为您提供的 15 兆 持久缓存。请注意，您可以为 localStorage 使用类型化数组和 WebSQL .还要记住 Application Cache是quite hard to work with .
4. 尝试将您的游戏打包为 PhoneGap 应用程序。通过这种方式，您可以避免用户在玩游戏之前下载大量数据。 200 兆作为一个单一的下载只是为了打开一个页面太多了。大多数人甚至都懒得等待。

除此之外，您最初建议用图像覆盖缓存实际上是有效的。只是不要马上去做。探索减少游戏下载大小的可能性。