0

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

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

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

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

请帮忙？

4

2 回答 2

2

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

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

把这个图像区域放在一个单独的区域怎么样iframe？那你可以做的是：

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

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

    numberOfLoadedImages * averageImageSize

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

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

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

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

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

  1. 不要将 DOM 用于游戏：它太占内存了。幸运的是，您已经在使用canvas。
  2. 精灵你的图像。图片精灵不仅有助于减少请求的数量。它们还可以让您减少Image对象数量并降低每个文件的开销。在IE 博客上阅读有关使用 spritecanvas制作动画的信息。
  3. 优化您的图像。有几种图像文件大小优化器。Smush它就是其中之一。试试你的图像。请注意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 兆只是为了打开一个页面，实在是太多了。大多数人甚至不会费心等待。

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

于 2012-05-14T13:19:46.497 回答
0

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

于 2012-05-14T12:22:11.660 回答