幻灯片 DOM 操作答案

【问题标题】：Slideshow DOM manipulation幻灯片 DOM 操作
【发布时间】：2013-01-30 22:59:47
【问题描述】：

我一直在研究各种基于 jQuery 的幻灯片脚本，对使用的不同方法以及它们如何处理基于 CSS3 的过渡和 DOM 操作感兴趣。我有一个基于 jQuery 的幻灯片 WordPress 插件，但它有点过时了，所以我正在重新编码它。

我对 jQuery 非常熟悉，多年来一直在使用它，并且在编写了一个公开可用的插件后，我看到了一些极端用例，其中 50 多张图像已用于 1920x1200 以上的图像（主要是摄影师）。

在对处理此类场景的最佳方法进行一些研究时，我已经看到了两种流行趋势，我想知道哪个更好。

首先是简单地将“幻灯片”放置在一个容器内，然后将其设置为动画。通常情况下，容器绝对可以将其从文档流中取出并加快处理速度（尤其是在使用 CSS3 时）。

接下来是在 DOM 中保留 4 到 8 个“幻灯片”，并在用户导航时附加/删除它们。

以下哪种方法更好？从 DOM 中添加/删除被认为是最昂贵的更改，但在这种情况下，它是否比在文档流之外操作包含 50 多个超大图像的容器更便宜？尤其是在移动设备上。

【问题讨论】：

“哪个更好”类型的问题通常不适合 stackoverflow。
做出相当荒谬的评论？ Stackoverflow 是“一个独立于语言的协作编辑的程序员问答网站”。这是一个问题，我正在寻找答案。我看不出这有什么不妥。
StackExchange 有一条线，其中一个问题只是呼吁很多人的意见，实际上除了人们的意见之外没有特别的基础，这对 StackExchange 来说不是一个好问题。其中一些类型的问题通常会因不当而被关闭。
作为一个极端的例子来说明，如果有人问：“你最喜欢编程编辑器的背景颜色是什么？”，这不是一个合适的问题，因为它主要是征求意见没有最佳答案。当您问“哪种方法更好”时，您处于边缘，因为您邀请了人们的意见。如果您问“我应该选择一种方法而不是另一种方法的原因是什么？”，那么您是在询问事实/原因而不是意见，并且您处于更安全的位置并且更有可能获得您真正想要的信息。只是想帮忙。
我理解并稍微修改了这个问题以反映这一点。我正在寻找更多的答案而不是意见，但我可以想象这样的问题的答案很可能基于一个人的意见只是问题的性质。两种方法都有效，但我想知道更好的可扩展方法，在极端情况下可能会成功或破坏脚本。

标签： jquery css performance browser dom-manipulation

【解决方案1】：

如果您想在处理大量幻灯片时最有效地使用内存，那么您可能希望一次只加载几张幻灯片图像（接下来的几张幻灯片），而不是整个集合。

同时，您需要预加载一些即将发布的图像，以便在您想要显示它们时准备好它们，因为最耗时的任务是在显示之前通过互联网将图像下载到本地浏览器。

如果您只是预加载几张即将发布的图片，那么您可以：

将它们预加载到您保存在 javascript 中的 img 对象，然后在需要时将其插入 DOM。
将它们预加载到已在 DOM 中但隐藏的 img 对象，然后当您想要显示它时，可以使其可见。

只要您只是提前预加载几张图片并删除之前显示的图片，以便在不再需要时不会将它们保存在内存中，那么这两种方法之间应该没有显着差异。如果您真的想知道它们之间是否有任何可测量的差异（内存消耗），您必须尝试设计一个性能测试以便进行测量。

我过去制作过可以显示大量图像的幻灯片，最重要的是要确保幻灯片在运行时不会累积内存使用量和使用越来越多的内存。当幻灯片最初运行时，内存使用量应该会增加，然后应该变平并停止增加，因为您达到了一个稳定状态，即在加载新图像时释放旧图像。这在浏览器中有点难以衡量，因为它们还有内存缓存和惰性垃圾收集，这会掩盖幻灯片实际使用的内存，但是如果你让它运行足够长的时间处理大量图像并且它会继续永远向上，然后你就知道你有问题需要解决。如果它停滞不前并且停止上升，那么你可能很好。

【讨论】：

非常感谢您，非常全面且有用的答案。正是我正在寻找的:) 非常感谢您抽出宝贵时间回答这个问题，谢谢！将进一步研究这种方法。

【解决方案2】：

我会在两者之间做点什么……除了在 dom 中显示的图像之外，我还会保留一些额外的图像……所以每当用户向左或向右滑动时……我会简单地显示一个具有已经下载并附加到 dom（非常便宜的操作）..

同时，我会删除远离 dom 的图像并将它们缓存到 javascript 数组中。

这样我就不会给 DOM 带来太多图像的负担（您事先不知道滑块将包含多少图像），同时我不会通过尝试操作太多图像来损害用户体验DOM 明智的

【讨论】：