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

我不能对这件事耿耿于怀。我在

HTML

页面中有几个div。每个Div代表不同的部分，因此包含该部分的不同图像。所有图像都从css中引用，并使用javascript（

document.getElementById（'DIV'）.style.display='none/block'；

）显示/删除

在本例中，假设我有2个div。每个分区Div（Div1和Div2）将是父分区，这些父分区中的任何Div都将是其子分区。（第1A、2A部分）

我发现，如果使用display:block设置Div1，并使用css背景图像：。。。。当我使用

style.display='none'隐藏Div1时，Div2是
display='none'
它确实将其从屏幕上删除，并允许我显示Div2..但是背景图像仍存在于浏览器内存中

有趣的是，当我在父DIV1中使用
style.display='none'
时，如果我将背景img放入DIV1中的一个子div（div1a），当我在父DIV1上使用
style.display='none'
时，子div1a图像确实会从浏览器内存中删除。然而，我发现这也不一致……它似乎对某些父div有效，而对其他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';


所容纳之物
所容纳之物
分区#分区1{
背景图片：url（images/mybg.png）；
背景重复：无重复；
宽度：480px；
高度：360px；
}
document.getElementById（“Div1”）.style.display='none'；
document.getElementById（“Div2”）.style.display='block'；

当我执行上述javascript时，该图像仍然存在于resources选项卡中

使用此方法时：

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


所容纳之物
所容纳之物
分区#分区1A{
背景图片：url（images/mybg.png）；
背景重复：无重复；
宽度：480px；
高度：360px；
}
document.getElementById（“Div1”）.style.display='none'；
document.getElementById（“Div2”）.style.display='block'；

当我执行上述javascript时，图像会从“资源”选项卡中删除……但这种效果不一致，而且并不总是有效：s
将某个内容设置为“显示：无”

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

如果您想从内存中实际删除一个元素，那么您需要从DOM中实际删除它，通常使用

parent.removeChild（child）

，并确保javascript中任何地方都没有对DOM元素的引用，这将阻止它被垃圾收集

---

---

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

将某些内容设置为

显示：无
不会在任何浏览器中从内存中删除任何内容。整个DOM元素仍然在DOM中，占用了相同的内存量，它只是被标记为隐藏在视图和布局中

如果您想从内存中实际删除一个元素，那么您需要从DOM中实际删除它，通常使用
parent.removeChild（child）
，并确保javascript中任何地方都没有对DOM元素的引用，这将阻止它被垃圾收集


此外，我不知道您如何评估浏览器中的内存使用情况，但大多数方法无法准确检测浏览器是否已释放给定图像，因为内存可能已从内部内存池中释放（可供重用），但未返回到操作系统。仅仅发布一个图像并不一定会减少浏览器的内存使用。所显示的内容将是高度特定于浏览器的，甚至是特定于操作系统的，并且肯定取决于您使用什么工具来检查内存使用情况。
请通过代码显示您的示例。更容易理解。你为什么说图像已从浏览器内存中删除？你是如何测试的？@JeremyJStarcher我正在查看文档（index.html）中资源选项卡下的chrome inspector>images@Drew只要代码中有一个指向某个资源的链接必须在某个时候加载，它就会显示在“资源”选项卡中。这个问题可能应该结束了。Jeremy的简短回答是：浏览器在管理内存方面做得非常好。除非您正在编写应用程序并意外地将内存锁定在闭包中，否则不要担心。（IE6除外——那完全是另一回事。）请用代码展示您的示例。更容易理解。你为什么说图像已从浏览器内存中删除？你是如何测试的？@JeremyJStarcher我正在查看文档（index.html）中资源选项卡下的chrome inspector>images@Drew只要代码中有一个指向某个资源的链接必须在某个时候加载，它就会显示在“资源”选项卡中。这个问题可能应该结束了。Jeremy的简短回答是：浏览器在管理内存方面做得非常好。除非您正在编写应用程序并意外地将内存锁定在闭包中，否则不要担心。（IE6除外——那是另外一壶鱼。）好的，谢谢。我是usi