4

如果通过创建图像var img=new Image()，onload添加并img.src设置处理程序，则将请求并onload调用图像数据，尽管图像未附加到 DOM 树。例如。

var img=new Image();
img.onload=function(){
    alert('Loaded!');
}
img.src='test.png';

何时以及如何对该图像进行垃圾收集？JavaScript 是否能够知道onload处理程序将被调用，并且只调用一次，然后释放图像？JavaScript 是否会注意到如果img.src未设置，因此onload将永远不会被调用并且img可以立即释放？

4

1 回答 1

6

我已经使用测试页面进行了一些调查以找到问题的答案 - 当带有事件处理程序的图像对象（在 JS 中创建且未附加到 DOM 树）被垃圾收集时。

页面中的 JS 代码通过document.createElement("img")（new Image()工作方式相同）创建 1000 个图像，附加 2 个事件处理程序（加载和错误）并设置src属性。
当所有图像都加载完毕后，JS 会尝试释放gc()在最后一个加载事件中显式调用的内存（=同步），并立即src将此图像的 设置为另一个 URL。此外，计时器设置为第二次尝试释放内存，因此稍后以异步方式完成。

Chrome Developer Tools 中的 Memory Timeline 显示，第一个 GC 收集了除最后一个之外的所有图像。我将此解释为最后一张图片无法被 GC 处理，因为它正在加载新图片。当第二次 GC 发生时，最后一个图像已经被加载并且它也被从内存中删除。

记忆时间线


我从这个实验中得出的结论：

  • 调用加载/错误事件处理程序，如果 JS 中不存在指向图像对象的链接，则事件，
  • 当图像加载过程完成（成功或失败）时，可以对图像对象进行垃圾收集。

在 Chrome Canary 33.0.1733.2 中测试，--js-flags="--expose-gc"
源代码http://pastebin.com/YZkGYmBC

于 2013-12-10T13:03:54.157 回答