显示：带有 css 的块/无 html 元素 ..未从内存中释放

Question

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

为了这个例子的目的，假设我有 2 个 div。每个部分 Div(Div1 & Div2) 将是父 div，并且这些父级中的任何 Div 都将是其子级。 (DIV1a, DIV2a)

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

有趣且我无法理解的是，当我将 style.display = 'none' 用于父 DIV1 时，如果我将 background-img 放入 DIV1 内的子 div(div1a) 中，子 div1a 图像确实会得到当我在父 DIV1 上使用 style.display = 'none' 时从浏览器内存中删除。但是我发现这也不一致....它似乎适用于某些父 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';

当我执行上述 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 元素的引用，这会保留它免于收集垃圾。

---

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