显示：阻止/无html元素，css ...不从内存释放

Question

我无法绕过这个。 我在HTML页面中有几个Div。 每个Div代表不同的部分，因此包含该部分的不同图像。 所有图像都是从css引用的，并使用javascript（ document.getElementById('DIV').style.display='none/block';显示/删除document.getElementById('DIV').style.display='none/block'; ）。

出于这个例子的目的，我可以说我有2个div。 每个部分Div（Div1和Div2）都是父母div，父母中的任何Div都是其子女。 （DIV1a，DIV2a）

我发现如果使用display：block设置Div1并使用css背景图像：....当我使用style.display = 'none';隐藏Div1时，Div2是display='none' style.display = 'none'; 它确实将它从屏幕上删除并允许我显示Div2 ..然后，背景图像仍然存在于浏览器内存中。

有趣的事情，我无法解决这个问题，如果我将background-img放入DIV1中的子div（div1a）中，当我使用style.display = 'none'作为父DIV1时，子div1a图像会当我在父DIV1上使用style.display = 'none'时，从浏览器内存中删除。 但是我发现这也是不一致的....它似乎适用于某些父div而不是其他人。

你可以告诉我这一点我很困惑，真的不知道如何处理这个问题。

谢谢大家的时间和想法。

代码示例：

使用此方法时

<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';

执行上述javascript时，图像仍显示在资源选项卡中

使用此方法时：

<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';

当我执行上面的javascript时，图像会从资源选项卡中删除......但是这种效果不一致，并不总是有效：s

Answer 1

设置要display: none不会在任何浏览器中从内存中删除任何内容。 整个DOM元素仍然在DOM中占用相同数量的内存，它只是从视图和布局中标记为隐藏。

如果你想从内存中实际删除一个元素，那么你需要从DOM中物理删除它，通常使用parent.removeChild(child)并确保在你的javascript中没有任何对DOM元素的引用会保留它从垃圾收集。

---

此外，我不知道您是如何评估浏览器中的内存使用情况的，但大多数方法都无法准确检测浏览器是否已释放给定图像，因为内存可能已从内部内存池中释放（可用于重用），但没有返回到操作系统。 仅发布图像不一定会显示浏览器的内存使用量减少。 展示的内容将是高度浏览器特定的，甚至是特定于操作系统的，并且肯定取决于您用于检查内存使用情况的确切工具。