javascript 显示：带有 css..not 从内存中释放的块/无 html 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12304455/
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
Display: Block/None html elements with css..not releasing from memory
提问by Drew
I can't wrap my head around this. I have several Divs within a HTMLpage. Each Div represents a different section and thus contains different images for that section. All the images are referenced from css and displayed/removed using javascript (document.getElementById('DIV').style.display='none/block';).
我无法解决这个问题。我在一个HTML页面中有几个 Div 。每个 Div 代表一个不同的部分，因此包含该部分的不同图像。所有图像均从 css 引用并使用 javascript ( document.getElementById('DIV').style.display='none/block';)显示/删除。
For the purpose of this example lets say I have 2 divs. Each section Div(Div1 & Div2) would be the parent divs and any Div within those parents will be its child. (DIV1a, DIV2a)
出于本示例的目的，假设我有 2 个 div。每个部分 Div(Div1 & Div2) 将是父 div，而这些父级中的任何 Div 将是其子级。(DIV1a, DIV2a)
I have found that if Div1 is set using display: block and uses the css Background-image:.... and Div2 is display='none'when I hide Div1 using style.display = 'none';that it does remove it from the screen and allows me to show Div2..however the background-image is still present in the browser memory.
我发现，如果Div1的使用显示设置：块，并使用CSS背景图像：....和Div2的display='none'时候我躲在Div1构成使用style.display = 'none';它确实从屏幕上删除，并可以让我展现Div2..however的background-image 仍然存在于浏览器内存中。
The interesting thing and which I can't wrap my head around is if I place the background-img into a child div(div1a) within DIV1 when I use style.display = 'none'for the the Parent DIV1 the child div1a image does get removed from the browser memory when I use style.display = 'none'on the parent DIV1. However I have found this also to be inconsistent....it seems to work on some parent divs and not on others.
有趣的是，如果我将 background-img 放入 DIV1 内的子 div(div1a) 中，当我style.display = 'none'用于父 DIV1 时，子 div1a 图像确实会从浏览器内存中删除，当我style.display = 'none'在父 DIV1 上使用。但是我发现这也不一致......它似乎适用于某些父 div 而不是其他。
As you can probably tell by this point I am heavily confused and really don't know how to approach this.
正如你现在可能知道的那样，我非常困惑，真的不知道如何解决这个问题。
Thank you all for your time and thoughts.
感谢大家的时间和想法。
Code Example:
代码示例：
When using this method
使用此方法时
<div id="Div1">
content....
</div>
<div id="Div2" style="display: none">
...content
</div>
div#Div1{
background-image: url(images/mybg.png);
background-repeat: no-repeat;
width: 480px;
height: 360px;
}
document.getElementById("Div1").style.display='none';
document.getElementById("Div2").style.display='block';
The image is still present in the resources tab when I execute the above javascript
当我执行上述 javascript 时，图像仍然存在于资源选项卡中
When using this method:
使用此方法时：
<div id="Div1">
<div id="Div1a">
content....
</div>
</div>
<div id="Div2" style="display: none">
content....
</div>
div#Div1a{
background-image: url(images/mybg.png);
background-repeat: no-repeat;
width: 480px;
height: 360px;
}
document.getElementById("Div1").style.display='none';
document.getElementById("Div2").style.display='block';
The image gets removed from the resources tab when I execute the above javascript...but this effect is inconsistent and doesn't always work :s
当我执行上述 javascript 时，图像会从资源选项卡中删除......但这种效果不一致并且并不总是有效：s
回答by jfriend00
Setting something to display: nonedoes not remove anything from memory in any browser. The entire DOM element is still in the DOM occupying the same amount of memory, it is just marked hidden from view and layout.
将某些内容设置为display: none不会从任何浏览器的内存中删除任何内容。整个 DOM 元素仍然在 DOM 中，占用相同数量的内存，只是被标记为从视图和布局中隐藏。
If you want to actually remove an element from memory, then you need to physically remove it from the DOM, usually using parent.removeChild(child)AND make sure that there are no references to the DOM element anywhere in your javascript which would keep it from getting garbage collected.
如果您想从内存中实际删除一个元素，那么您需要从 DOM 中物理删除它，通常使用parent.removeChild(child)AND 确保在您的 javascript 中的任何地方都没有对 DOM 元素的引用，这将防止它被垃圾收集。
Also, I don't know how you are assessing memory usage in your browser, but most methods will not accurately detect whether a browser has freed a given image or not because the memory may have been freed from an internal pool of memory (available for reuse), but not returned to the OS. Just releasing an image will not necessarily show a reduction in memory usage by the browser. What does show would be highly browser specific and even OS specific and would certainly depend upon exactly what tools you were using to examine memory usage.
另外，我不知道您如何评估浏览器中的内存使用情况，但大多数方法无法准确检测浏览器是否已释放给定图像，因为内存可能已从内部内存池中释放（可用于重用），但不会返回到操作系统。仅发布图像不一定会显示浏览器内存使用量的减少。所显示的内容将高度特定于浏览器，甚至特定于操作系统，并且肯定取决于您用于检查内存使用情况的确切工具。
