加载价值200 MB的新图像（）后，Javascript在Safari/iPad2中运行缓慢。为什么会这样？

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

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

手动清除缓存

最小化浏览器，等待约20秒，然后重新打开浏览器，之后iOS/浏览器已回收内存并按其应做的方式运行JS 我本以为iOS会回收运行当前任务所需的内存，但似乎不是这样。另一种解决方法是将200Mb的“缓存清除”图像加载到Image（）对象中，然后通过设置

src=“”

来删除这些图像。这似乎有帮助，但不是一个优雅的解决方案

---

请帮忙

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

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

---

我假设您的页面上有一些图像库或杂志样式的内容区域

将此图像区域放在单独的

iframe

中如何？那么你能做的就是：

有两个iFrame。只有一个在时间上可见并处于活动状态

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

numberOfLoadedImages*平均图像大小

可能是一个很好的解释

当这个数字接近某个threshold时，开始将当前可见的内容预加载到第二个iframe中

翻转iFrame的可见性，使第二个iFrame变为活动状态

清除第一帧的内部内容

必要时重复整个过程

我不确定这是否对你有效，但我希望iPad上的WebKit引擎能够独立清除帧的内存

---

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

如果这是一个游戏，我假设你想在屏幕上同时有许多游戏对象，你不能简单地卸载其中的一些部分。以下是针对这种情况的一些建议：

不要在游戏中使用DOM：它的内存太大。幸运的是，您已经在使用

canvas

精灵你的图像。图像精灵不仅有助于减少请求数量。它们还可以减少

图像

对象的数量，并降低每个文件的开销。阅读有关在上为

画布

动画使用精灵的信息

优化你的图像。有几个用于图像的文件大小优化程序。是其中之一。试试你的图片。请注意中讨论的其他技术

尝试矢量图形。SVG很棒，可以在画布上绘制

试着简化你的游戏世界。也许一些背景对象不需要那么详细。或者你可以少给他们点精灵。也可以对同一组的不同对象使用图像过滤器和遮罩。就像戴夫·牛顿所说的那样，iPad是一款非常受限制的设备，你很可能只需要一个质量相对较低的精灵就可以脱身

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

预加载您将需要的图像并卸载不再需要的图像。如果你的游戏有“关卡”或“任务”，则只加载当前关卡所需的精灵

首先尝试加载“流行”图像，然后在后台下载剩余的图像一次。您可以使用单独的

，这样您的主游戏循环就不会被下载中断。您还可以使用以协调您的下载器机架

您可以将最流行的图像存储在

localStorage

、

Application Cache

和

WebSQL

中。他们可以为您提供5 mb的存储空间。这对您来说是15兆的持久缓存。注意，您可以将类型化数组用于

localStorage

和

WebSQL

。还要记住，

应用程序缓存

是可用的

尝试将游戏打包为PhoneGap应用程序。通过这种方式，您可以避免用户在玩游戏之前下载大量数据。仅仅为了打开一个页面就下载200兆就太多了。大多数人甚至懒得等那一刻

---

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

完全是猜测，但可能是因为你只占用了iPad的一半物理内存。这是一个非常受限制的设备，无论发生什么，沉重的页面都会被磨掉。IMO嵌入式系统的技巧，虽然可能不美观，但却是唯一真正的解决方案。你不能减少图像的大小或数量吗？@Mikey：是的，我可以减少图像的数量，但我仍然会遇到问题，因为为以前的站点分配的缓存会滚动并影响我的站点/代码。问题是，这是一个相当gfx重的网站，只能优化到目前为止。我希望这是一个笑话。。。单个页面上有200 MB的图像？真的吗？Image（）对象是否存储在未压缩的位图或其他东西中？不幸的是，我不能使用CSS属性，因为我没有使用任何DOM对象（除了画布包装器）。绝对所有的东西都被渲染到画布元素上。取决于游戏的状态