不从HTML中删除不可见元素是否有害？

Question

我用JQuery制作了一个幻灯片，目前只使用append()将<img>添加到以前定义的容器中。幻灯片自动旋转，最后一张幻灯片返回开始并无限继续。

目前，我根本不删除容器中的上一个图像。 我没有注意到任何性能方面的变化或我的内存填充 - 如果我继续添加元素而不删除旧元素，我会在Flash中习惯这种行为。

是否有必要删除旧图像，还是永远不会引起性能问题？

- Marty

Answer 1

很可能，随着添加的照片越来越多，性能会逐渐受到影响，但如果可能的话，请测试它，尽可能添加更多照片，但如果您的网站上没有太多活动，您可能不会看到任何性能问题。如果您没有看到任何问题，请不要担心。就像我说的，试试看吧。

- mcbeav

---

目前我并不太关心性能。我的意思是，人们不会将这个页面打开15个小时等待它变慢，而且在视觉上也没有任何问题。这更多是出于我的好奇心。如果我得不到一个确定的答案，快速添加大量图片可能是一个不错的策略，我会试一试 :) - Marty

Answer 2

可能有些内容与浏览器有关，但总的来说，我认为不清理旧元素确实是“不好”的。无论元素是否可见，它仍会向DOM结构添加一个节点，而你不能无限地向DOM添加节点。

除非浏览器实现了某种智能修剪算法，可以交换未使用/不可见的DOM部分，但我从未听说过这样的实践。

- aroth

---

你后面的评论可能不适用，因为浏览器不会认为前一个幻灯片是不可见的，它只是有一个新元素放在上面。你能详细说明一下第一个观点吗？关于不能无限添加到DOM中？ - Marty

@Marty Wallace - 当您调用append()将<img>元素添加到某个现有容器时，这将为该元素创建一个新的Node并将其作为容器的Node的子级添加到DOM（文档对象模型）中。 DOM只是表示网页/文档当前状态的数据结构。 因此，实质上，每次您append()某些内容时，此数据结构都会略微增大，并且它只能增长到浏览器耗尽内存之前的大小。 - aroth

啊，所以我的担忧应该集中在浏览器的内存上。这很有道理；+1。 - Marty

@Marty Wallace - 是的。虽然在实践中，可能需要非常长的时间/大量的<img>元素才会引起严重问题。 - aroth

Answer 3

在追加图片之前添加 $(div).innerHTML='' 不应该清除 div 中的所有内容吗？

- Shaunak

---

这将取消我当前正在进行的转换，即新图像在先前添加的图像上淡入，使其看起来非常好。 - Marty

哎呀，你没提到那个！:P - Shaunak

Answer 4

浏览器会缓存所有加载的图像。每个图像都会消耗内存，但删除图像不会影响缓存。如果缓存开始成为问题，浏览器将开始释放内存。每个浏览器的处理方式都不同，有些比其他浏览器更好。任何不在当前页面可视空间中的图像都可以被清除。如果当前页面上的图像被丢弃，并随后在页面的可视区域中变得可见，则会重新加载该图像。

总之，删除旧图像不会影响性能。

- ic3b3rg

---

那么更准确地说，您的意思是删除已添加到页面中的元素没有任何优势？ - Marty

并非所有元素都是如此。img容器本身的开销非常小。这就是为什么我说在这种情况下没有真正的优势。删除开销更大的元素，例如input、select、textarea等，可能会有所不同（但只有在删除大量这些元素时才会有所不同）。 - ic3b3rg