不从 HTML 中删除不可见的元素是不是很糟糕？答案

【问题标题】：Is it bad to not remove elements from HTML that aren't visible?不从 HTML 中删除不可见的元素是不是很糟糕？
【发布时间】：2011-08-27 18:00:30
【问题描述】：

我使用 JQuery 制作了一个幻灯片，目前只使用 append() 将 <img> 添加到先前定义的容器中。幻灯片自动循环播放，在最后一张幻灯片后返回起点并无限继续。

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

是否有必要删除旧图像，或者这些图像永远不会导致性能问题？

【问题讨论】：

标签： javascript jquery performance slideshow

【解决方案1】：

很可能，它会随着时间的推移影响性能，添加的照片越多，性能受到的影响就越大，但如果可能的话，测试一下，尽可能多地添加，但如果不是很多在您的网站上进行，您可能看不到任何性能问题。如果您没有发现任何问题，请不要担心。就像我说的，试试看。

【讨论】：

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

【解决方案2】：

其中一些可能与浏览器相关，但总的来说，我会说是的，不清理旧元素确实是“不好的”。无论一个元素是否可见，它仍然是在 DOM 的结构中添加一个节点，不能无限添加到 DOM 中。

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

【讨论】：

您的后一条评论可能不适用，因为前一张幻灯片不会被浏览器视为不可见，它只是在其上放置了一个新元素。您能否详细说明您关于无法无限添加到 DOM 的第一点？
@Marty Wallace - 当然。当您调用append() 将<img> 元素添加到某个现有容器时，这将为该元素创建一个新的Node，并将其添加为DOM 中容器Node 的子元素（文档对象模型） . DOM 只是表示网页/文档当前状态的数据结构。所以本质上，每次你append()什么东西，这个数据结构都会变大一点，而且它只能在浏览器耗尽内存之前变得这么大。
啊，所以我关心的应该是浏览器的内存。这就说得通了; +1。
@Marty Wallace - 是的。尽管在实践中，可能需要很长时间/大量 <img> 元素才能导致严重问题。
别担心，一切都有意义。谢谢。

【解决方案3】：

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

【讨论】：

这将使我正在发生的当前过渡无效，即新图像淡入先前添加的图像的顶部，使其看起来非常好。
哎呀你没有提到！ :P

【解决方案4】：

浏览器缓存所有加载的图像。每个图像都会消耗内存，但删除图像不会影响缓存。如果缓存开始出现问题，浏览器将开始释放内存。每个浏览器都以不同的方式执行此操作，有些浏览器比其他浏览器做得更好。在当前页面的可视空间中不可见的任何图像都是公平的游戏。如果当前页面上的图像被丢弃并随后在页面的可视区域中可见，则会重新加载。

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

【讨论】：

那么更准确地说，您的意思是说删除已添加到页面的元素没有任何优势？
并非所有元素都如此。 img 容器本身的开销很小。这就是为什么我说在这种情况下没有真正的优势。删除诸如输入、选择、文本区域等开销较大的元素可能会有所作为（但前提是您要删除大量元素）。