Question

我正在开发一款HTML 5游戏，它已经在线，但它目前还很小，一切都还可以。

事情是，随着它的增长，它将加载许多，许多图像，音乐，声音效果等等。玩游戏15分钟后，可能已经加载了至少100种不同的资源。由于它是一个HTML5应用程序，它在游戏过程中永远不会刷新页面，因此它们都在后台堆叠。

我注意到，我在WebKit上加载的每个资源（至少使用Web Inspector）都会在我删除<img>，<link>到CSS之后保留。我猜它还在记忆中，只是没有被使用，对吧？

这最终会耗费大量内存，导致性能下降，特别是在iOS和Android手机上（我在当前版本上已经略微注意到），其资源比台式机更受限制。

我的问题是：是否可以通过JavaScript完全卸载资源，释放RAM中的空间？无需刷新整个页面以“清理它”。

最糟糕的情况：使用框架是否可以通过删除框架来释放这些框架的资源？

谢谢！

Answer 1

您所能做的就是依赖JavaScript内置的垃圾收集机制。

只要没有图像参考，就会启动。

假设你有一个每个图像的引用指针，如果你使用：

img.destroy()

或

img.parentNode.removeChild(img)

值得一试：http://www.ibm.com/developerworks/web/library/wa-memleak/

另外：Need help using this function to destroy an item on canvas using javascript

修改

以下是一些允许您将图像加载到var中的代码。

<script language = "JavaScript">


var heavyImage = new Image(); 
heavyImage.src = "heavyimagefile.jpg";

......

heavyImage = null; // removes reference and frees up memory

</script>

这比使用JQuery .load（）更好，因为它可以让您更好地控制图像引用，如果引用已经消失，它们将从内存中删除（null）

取自：http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

希望它有所帮助！

Answer 2

您的描述意味着您已完全删除了对资源的所有引用。那么，您所看到的行为只是没有被调用来清理空间的垃圾收集器，这在javascript实现中很常见，直到“必要”。设置为null或致电delete通常不会更好。

作为一种常见情况，您通常可以在场景加载/卸载期间调用CollectGarbage()来强制收集过程。这通常是为游戏“阶段”加载数据时的最佳解决方案，因为这是一个非时间关键的时间。你通常不希望收藏家在游戏过程中调用，除非它不是一个非常实时的游戏。

如果你想为常见的游戏控制保留某些资源，那么框架通常是一个难以解决的问题。您需要考虑是刷新整个资源还是仅刷新某些资源。

Answer 3

除了普通的<img>标记之外，还有2种更好的方法可以加载图片，Google在这里很好地讨论了这些标记：

http://www.youtube.com/watch?v=7pCh62wr6m0&list=UU_x5XG1OV2P6uZZ5FSM9Ttw&index=74

通过HTML5 <canvas>加载图片，速度更快。我真的会看到那个视频，并以更快的速度实现这些方法。我认为使用canvas进行垃圾收集会更好，因为它会脱离DOM。
嵌入式数据网址，其中图像标记的src属性是图像的实际二进制数据（是的，它是一个巨大的字符串）。它是这样开始的：src="data:image/jpeg;base64,/9j/MASSIVE-STRING ... "使用它之后，您当然希望使用一种方法来删除此节点，如其他答案中所述。（我不知道如何生成这个base64字符串，试试谷歌或视频）

Answer 4

你说最糟糕的情况：通过删除框架，使用框架可以帮助释放这些框架的资源

使用框架很好。是的，它可以通过删除框架来释放资源。

Answer 5

好的，所以我通过将3个不同的HTML加载到＆lt;中来进行测试。文章＆gt;标签。每个HTML都有很多巨大的图像。每个“页面”大约有15个巨大的图像。

所以我使用jQuery.load（）函数在标签中插入每个。还有一个额外的HTML只有一个＆lt; h1＆gt;，查看没有图片的页面替换上一页时发生的情况。

嗯，当你开始滚动时，RAM变得更大，并且在经历一个特别大的图像（大小和尺寸，而不仅仅是大小）时会发射。但是一旦你把它留在后面并且更轻的图像进入屏幕，RAM的消耗实际上会下降。每当我用JS替换页面的内容时，RAM占用量就会大大降低。虚拟内存总是很高，很少出现故障。

所以我猜浏览器非常聪明地处理资源。如果你把它放在那里很长一段时间似乎没有卸载它们，但是一旦你开始加载其他页面或滚动，它就会开始加载/释放。

我想我毕竟没有什么可担心的......

谢谢大家！ =）

使用JavaScript卸载HTML上的资源

5 个答案: