删除JavaScript中的HTML元素以避免内存泄漏 [英] Deleting HTML Elements in JavaScript to avoid memory leaks
问题描述
我最近开始使用javascript，但是我的html编码技能有些欠缺.话虽如此，我遇到了一些有趣的东西，您可以在javascript中找到它们.由于javascript和html的紧密使用，恐怕造成了内存泄漏.
I recently got into javascript, and my html coding skills are somewhat lacking. That being said, I've run into a few funny things that you can find in javascript. Because of the close use of javascript and html I'm afraid I've created a memory leak.
在这种情况下，我想创建自己的自定义javascript警报样式/确认框.我总结了通过javascript有效创建html叠加层的方法.做出选择之后，我删除了该叠加层.
In this instance I wanted to create my own custom javascript alert style/confirm box. I wound up with effectively creating an html overlay through javascript. After the selection has been made, I remove that overlay.
var output;
var createPromotionBox = function () {
var choice = '';
var b = document.getElementById('button-container');
var box = document.createElement('div');
box.setAttribute('id', 'alert-box');
box.setAttribute('class','alert');
b.appendChild(box);
var text = document.createElement('div');
text.setAttribute('class','alert-content');
text.setAttribute('id', 'alert-text');
text.innerHTML = 'Promote your pawn!<br>';
box.appendChild(text);
var arr = ['Q', 'N', 'R', 'B'];
for(var i in arr) (function(i){
var btn = document.createElement('button');
btn.setAttribute('class','promotion-button');
btn.setAttribute('id',arr[i]+'btn');
btn.innerHTML = arr[i];
btn.onclick = function () {
output = arr[i];
deletePromotionBox();
};
text.appendChild(btn);
})(i);
};
var deletePromotionBox = function () {
var arr = ['Q', 'N', 'R', 'B'];
for(var i in arr) {
removeElement(arr[i]+'btn');
}
removeElement('alert-text');
removeElement('alert-box');
};
var removeElement = function (elementId) {
var e = document.getElementById(elementId);
e.parentNode.removeChild(e);
};
document.getElementById('btn').onclick = createPromotionBox;
<html>
<body > Amazing code works! <br><br>
<div class="button-box" id="button-container" style="width: 600px">
<button id="btn">Click Me!</button>
</div>
</body>
</html>
创建b，box，text和btn时是否泄漏?我删除了html元素，但是变量引用现在从它们的元素中孤立了.
Do I have a leak when I created b, box, text, and the btn's? I removed the html elements but the variable references are now orphaned from their elements.
我想我也读过一个我不应该使用remove()的地方.我应该有另一种方法吗?
Also I think I read somewhere that I should not use remove(). Is there another way I should be doing this?
推荐答案
有一些用于垃圾收集器进行垃圾收集的算法. Javascript使用称为 Mark and Sweep algorithm 的算法，其中保留了每个可到达的对象，并从内存中清除了不可到达的对象.
There are algorithms used for garbage collection by garbage-collectors. Javascript uses the algorithm called Mark and Sweep algorithm in which every reachable object are preserved and unreachable object are cleared from the memory.
此算法有两个阶段.
1.标记
第一阶段是标记阶段，该阶段对整个根集进行树遍历，并将根所指向的每个对象标记为正在使用中. .这些对象指向的所有对象都将被标记，以此类推，以便标记通过根集可访问的每个对象.
The first stage is the mark stage which does a tree traversal of the entire root set and marks each object that is pointed to by a root as being in-use. All objects that those objects point to, and so on, are marked as well, so that every object that is reachable via the root set is marked.
2.扫一扫
从头到尾扫描所有内存，检查所有可用或已用的块；那些没有被标记为正在使用"的文件无法通过任何根目录访问，并且它们的内存被释放.对于标记为使用中的对象，将清除使用中标志，为下一个周期做准备.
All memory is scanned from start to finish, examining all free or used blocks; those not marked as being 'in-use' are not reachable by any roots, and their memory is freed. For objects which were marked in-use, the in-use flag is cleared, preparing for the next cycle.
另请参阅:
在您的情况下，Do I have a leak when I created b, box, text, and the btn's?否，因为通过使用removeChild删除这些对象的可跟踪路径时，没有其他变量引用这些对象.因此，垃圾收集器释放了这些对象.
In your case, Do I have a leak when I created b, box, text, and the btn's? No, because when you remove a traceable path for those object by using removeChild there are no other variables referring to those objects. So garbage collector freed up those objects.
这篇关于删除JavaScript中的HTML元素以避免内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
