Javascript 在加载 200mb 的新 Images(） 后在 Safari / iPad2 中运行缓慢.为什么

首先阅读LinkedIn工程博客上的优秀文章。仔细阅读并检查是否有一些也可以在应用程序中尝试的优化。如果您尝试了所有这些方法，但仍未解决性能问题，请继续阅读。

---

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

如何将此图像区域放在单独的iframe中？然后你可以做的是：

1. 有两个内嵌框架。只有一个应该在时间上可见并处于活动状态。

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

   numberOfLoadedImages * averageImageSize

   可能是一个很好的接近。

3. 当这个数字接近时，一些 thresshold 开始将当前可见的内容预加载到第二个 iframe 中。
4. 翻转 iframe 的可见性，使第二个窗口变为活动状态。
5. 清除第一帧的内部内容。
6. 根据需要重复整个过程。

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

---

编辑：原来你正在写一个游戏。

如果这是一个游戏，我假设您希望同时在屏幕上显示许多游戏对象，并且您无法简单地卸载它们的某些部分。以下是针对这种情况的一些建议：

1. 不要在游戏中使用 DOM：它太占用内存了。幸运的是，您已经在使用canvas了。
2. 对图像进行精灵处理。图像精灵不仅有助于减少请求数量。它们还允许您减少Image对象的数量，并降低每个文件的开销。在 IE 博客上阅读有关使用精灵制作canvas动画的信息。
3. 优化您的图像。图像有几个文件大小优化器。SmushIt就是其中之一。为您的图像尝试一下。注意Stoyan Stefanov在YUI博客上讨论的其他技术。
4. 尝试矢量图形。SVG很棒，canvg可以在画布上绘制它。
5. 尝试简化您的游戏世界。也许某些背景对象不需要那么详细。或者，也许您可以为他们减少精灵。或者，您可以对同一组的不同对象使用图像滤镜和蒙版。就像戴夫·牛顿(Dave Newton(所说的那样，iPad是一种非常受限的设备，你很有可能可以侥幸使用质量相对较低的精灵。

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

1. 预加载需要的图像，卸载不再需要的图像。如果您的游戏有"关卡"或"任务"，则加载当前精灵所需的精灵。
2. 尝试先加载"流行"图像，然后在后台下载剩余的图像。您可以为此使用单独的<iframe>，这样您的主游戏循环就不会因下载而中断。您还可以使用跨帧消息传递来协调下载程序帧。
3. 您可以将最流行的图像存储在 localStorage 、 Application Cache 和 WebSQL 中。他们每个人都可以为您提供5 mb的存储空间。这对您来说是 15 兆的持久缓存。请注意，您可以将类型化数组用于 localStorage 和 WebSQL 。还要记住，Application Cache很难使用。
4. 尝试将您的游戏打包为 PhoneGap 应用程序。通过这种方式，您可以避免用户在玩游戏之前下载大量数据。200 megs 作为一次下载只是为了打开一个页面太多了。大多数人甚至懒得等待。

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

我设法通过将当前不在视口中的所有图像设置为显示：none来减少影响。这是背景图像，但我还没有测试超过 100Mb 的图像，所以不能说这是否真的有帮助。但绝对值得一试。