Javascript 如何删除javascript画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11949607/
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
How to delete javascript canvas
提问by saward
I want to have a bunch of objects, let's say:
我想要一堆对象，让我们说：
function Block() {
this.canvas;
}
blocks = [];
And I will at occasions specify:
我有时会指定：
block[x] = new Block();
and then:
进而：
block.canvas = document.createElement('canvas');
But I will also want to delete this new canvas to free up memory sometimes. Do I just need to do:
但有时我也想删除这个新画布以释放内存。我只需要做：
block.canvas = null; (or whatever the appropriate method is)
And then javascript will free up the memory at some stage? Or is there an explicit way to delete the object and free up the memory?
然后javascript会在某个阶段释放内存？或者是否有明确的方法来删除对象并释放内存？
Thanks!
谢谢！
采纳答案by Sirko
Memory, that is taken by objects, that are referenced nowhere, is recovered in JavaScript by the garbage collection(MDN docu on this).
由对象占用的内存，在任何地方都没有引用，在 JavaScript 中通过垃圾收集（MDN 文档）回收。
So in order to free up the memory, you just have to delete all references to your canvasobjects and in the next run of the garbage collector, the memory will be freed again.
所以为了释放内存，你只需要删除对你的canvas对象的所有引用，在垃圾收集器的下一次运行中，内存将再次被释放。
This can be done, like you did, using block.canvas = null;or (depending on the objects/properties scope) by delete block.canvas.
这可以像您一样使用block.canvas = null;或（取决于对象/属性范围）通过delete block.canvas.
But be sure, that you remove everyreference. This can also be references by the DOM or any other object!
但请确保删除所有引用。这也可以被 DOM 或任何其他对象引用！
回答by Nikola Radosavljevi?
It's not enough if you are actually using that canvas to draw objects. If you're adding the canvas to DOM, you also need to remove it from it, otherwise it will remain in memory of course. If you're adding it using appendChild, you should remove it using removeChild
如果您实际上使用该画布来绘制对象，这还不够。如果您将画布添加到 DOM，您还需要从中删除它，否则它当然会保留在内存中。如果你使用添加它appendChild，你应该使用删除它removeChild
On a side note, if you are going to have bunch of objects as you say, it's really bad idea to have canvas per object. You should think about having canvas per visual layer.
附带说明一下，如果你要像你说的那样有一堆对象，那么每个对象都有画布真的是个坏主意。您应该考虑每个视觉层都有画布。
回答by heikkim
Javascript has an operator named delete:
Javascript 有一个名为 delete 的操作符：
delete block.canvas;
回答by otakustay
Most javascript engine uses reference countingor mark-and-swapas its GC policy, so any object with no reference to global object (window in browser environment) would be freed up at some stage.
大多数 javascript 引擎使用引用计数或标记和交换作为其 GC 策略，因此任何没有引用全局对象（浏览器环境中的窗口）的对象都会在某个阶段被释放。
So to ensure your <canvas>element could be collected, you should make sure:
因此，为了确保您的<canvas>元素可以被收集，您应该确保：
- No variable or property references this, by running
block.canvas = nullyou get things done - The
<canvas>element no longer attached to the DOM tree, by runningcanvas.parentNode.removeChild(canvas)you could make it done
- 没有变量或属性引用它，通过运行
block.canvas = null你可以完成任务 - 该
<canvas>元素不再连接到DOM树，通过运行canvas.parentNode.removeChild(canvas)你可以把它做
From your provided code, you don't do the DOM removal, maybe your <canvas>is not attached to DOM tree, but if it is, remember to remove it.
从您提供的代码中，您没有执行DOM 删除，也许您<canvas>没有附加到 DOM 树，但如果是，请记住将其删除。
PS: I noticed some answers metion the deletekeyword to remove the canvasproperty, but it is really not neccessary, GC works as expected just after block.canvasis set to null, since a deletemay cause V8 to run more slowly, my advice is to prevent the usage of delete.
PS：我注意到有些答案提到了delete要删除canvas属性的关键字，但这确实不是必需的，GC 在block.canvas设置为后按预期工作null，因为adelete可能会导致 V8 运行更慢，我的建议是防止使用delete.
