Javascript 能够从 HTML 页面中卸载图像吗？答案

【问题标题】：is Javascript able to unload an image from an HTML page?Javascript 能够从 HTML 页面中卸载图像吗？
【发布时间】：2019-03-20 02:42:00
【问题描述】：

我想知道是否可以通过一些 Javascript 指令从 HTML 页面中卸载图像并释放其内存占用。假设图像已经显示在屏幕上。假设我需要卸载它以节省内存（原因与此无关）。我可以用 Javascript 来做吗？

【问题讨论】：

您可以从 DOM 树中删除图像，但从内存中删除它仅取决于您的浏览器。
作为@duri 的后续，浏览器将垃圾收集未使用的资产并最终释放内存，尽管从用户的角度来看，没有用于该级别控制的 API
你可能想用一张大图制作一个测试用例，并在删除它时观察浏览器内存消耗。让我知道，浏览器是如何反应的；）

标签： javascript html image

【解决方案1】：

您问题上的 cmets 是正确的，您可以将其从 DOM 中删除，但浏览器会在确定它良好且准备就绪时将其从内存中清除。

要从 DOM 中清除它，您可以执行以下操作：

var badImage = document.querySelector("img#idOfImage"); 
//or "img[href='nameofimagefile.jpeg']" 
//whatever you need to do to get the right element
//then, remove it:

badImage.parentElement.removeChild(badImage);

【讨论】：

【解决方案2】：

$('#myDiv').remove();

或

function removeElement(divNum) {
    var d = document.getElementById('myDiv');
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
}

会将其从 DOM 中移除，但不会释放任何内存、带宽或 http 请求...因此在性能方面不会有太大的影响（不考虑渲染）。

但是我相信如果图像从 DOM 中删除，它使用的内存最终将由浏览器管理和删除（垃圾收集）。

所以简而言之，我认为没有特定的方法可以将其从内存中删除，因为这是浏览器级别的问题..

【讨论】：

如果图像没有被删除，只是它的 src 属性更改为空，它最终是否也会被垃圾收集？

【解决方案3】：

您可以通过在删除之前将 src 属性分配给 1x1 像素来释放 img 元素的内存。

const imgElement = document.querySelector(selector);
imgElement.setAttribute('src', '/images/pixel.gif');
imgElement.parentElement.removeChild(imgElement);

【讨论】：

非常接近已经接受的答案作为迟到的答案，考虑这是否有助于 OP。
我刚刚找到这个答案并认为它很有用。接受的答案仅从 DOM 中删除 <img> 元素。 Shogo 的回答也是这样做的，但更重要的是，它试图通过定义一个新的图像源来实际从浏览器内存中删除图像（根据 OP 的要求）。如果您只是从 DOM 中删除元素，它仍然存在于全局范围内，具有相同的源图像（因此浏览器可能会将其保留在内存中） - 例如，以 document.body.appendChild(badImage); 结束接受的答案，图像就会出现右后（在页面底部）。