javascript 处置一个图像对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11032018/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dispose an image object
提问by Tim S.
When creating a new Image element in javascript, Google Chrome's memory tool (Developer tools > Timeline > Memory) considers it as a new DOM element, naturally.
在 javascript 中创建新的 Image 元素时，Google Chrome 的内存工具（开发者工具 > 时间轴 > 内存）自然会将其视为新的 DOM 元素。
In my case, I'm ending up with 1500+ DOM elements, and I wish to get rid of them. I have tried to save all objects in an array and delete all of them in a loop when I'm ready creating all objects, resulting in the following error:
就我而言，我最终得到了 1500 多个 DOM 元素，我希望摆脱它们。我试图将所有对象保存在一个数组中，并在我准备好创建所有对象时在循环中删除所有对象，导致以下错误：
Uncaught TypeError: Cannot call method 'removeChild' of null
Uncaught TypeError: Cannot call method 'removeChild' of null
That indicates the Image objects doesn't appear in the actual DOM.
这表明 Image 对象没有出现在实际的 DOM 中。
var images = [];
var i, image;
for( i = 0; i < urls.length; i++ ) {
image = new Image();
image.src = urls[i];
}
// other stuff happens
for( i = 0; i < images.length; i++ ) {
// apparently this doesn't work because I'm not adding the image to my DOM
// images[i].parentNode.removeChild( images[i] );
// delete images
}
Is there a way to remove/delete/unset/dispose the Image objects?
有没有办法移除/删除/取消设置/处理 Image 对象？
回答by naivists
Setting images = nullwould remove your reference in code to the object. However, to implement its loadevent, Chrome has to have its own internal reference to the object.
设置images = null将删除您在代码中对对象的引用。然而，为了实现它的load事件，Chrome 必须有它自己对对象的内部引用。
That is, you could have code like this:
也就是说，你可以有这样的代码：
for( i = 0; i < urls.length; i++ ) {
image = new Image();
image.src = urls[i];
image.onload = function(){alert('Test');};
image = null;
}
This way you would still get a lot of "Test" alerts, even though you do not have a reference to these objects.
这样，即使您没有对这些对象的引用，您仍然会收到很多“测试”警报。
Hence, my guessis that it is a bug in Chrome, not in your code.
因此，我的猜测是它是 Chrome 中的一个错误，而不是您的代码中的错误。
Update: looking through the Chromium source sort of proves that (I mean the comment on lines 67-71 of this file, especially the FIXME note http://code.google.com/searchframe#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/bindings/v8/custom/V8HTMLImageElementConstructor.cpp):
更新：查看 Chromium 源代码可以证明（我的意思是该文件第 67-71 行的注释，尤其是 FIXME 注释http://code.google.com/searchframe#OAMlx_jo-ck/src/third_party/WebKit /Source/WebCore/bindings/v8/custom/V8HTMLImageElementConstructor.cpp）：
// Make sure the document is added to the DOM Node map. Otherwise, the HTMLImageElement instance // may end up being the only node in the map and get garbage-ccollected prematurely. // FIXME: The correct way to do this would be to make HTMLImageElement derive from // ActiveDOMObject and use its interface to keep its wrapper alive. Then we would // remove this code and the special case in isObservableThroughDOM.
// Make sure the document is added to the DOM Node map. Otherwise, the HTMLImageElement instance // may end up being the only node in the map and get garbage-ccollected prematurely. // FIXME: The correct way to do this would be to make HTMLImageElement derive from // ActiveDOMObject and use its interface to keep its wrapper alive. Then we would // remove this code and the special case in isObservableThroughDOM.
回答by Joseph
If you are not adding them to the DOM (like using appendChildto a parent), then removeChildis useless. The Image objects are only in the memory.
如果您不将它们添加到 DOM（如appendChild用于父项），removeChild则无用。Image 对象仅在内存中。
And to dispose items in the memory, you only need to remove references to these objects (like set the referencing variable to null), and garbage collection will do the rest. If you can't null them all, they won't be GC'ed.
而要处理内存中的项目，您只需要删除对这些对象的引用（例如将引用变量设置为 null），剩下的由垃圾收集完成。如果您不能将它们全部归零，它们就不会被 GC 处理。
回答by Hicham
To get rid of the bug described by "naivists" of chrome and specilly IE and EDGE. You can change the image source to empty so it take zero memory.
摆脱 chrome 和特别是 IE 和 EDGE 的“天真主义者”所描述的错误。您可以将图像源更改为空，以便它占用零内存。
image.src = '';
image = null;
回答by KooiInc
AFAIK, assigning nullshould clean it up: images[i] = null
AFAIK，分配null应该清理它：images[i] = null
回答by ioseb
I think only way is to do this:
我认为唯一的方法是这样做：
for( i = 0; i < images.length; i++ )
images[i] = null;
}
// or just
images = null;
