我一直在研究各种基于 jQuery 的幻灯片脚本，对使用的不同方法以及它们如何处理基于 CSS3 的过渡和 DOM 操作感兴趣。我有一个基于 jQuery 的幻灯片 WordPress 插件，但它有点过时了，所以我正在重新编码它。
我对 jQuery 非常熟悉，多年来一直在使用它，并且编写了一个公开可用的插件，我已经看到了一些极端的用例，其中 50 多张图像已用于 1920x1200 以上的图像（主要是摄影师）。
在对解决此类情况的最佳方法进行一些研究时，我已经看到了两种流行趋势，我想知道哪个更好。
第一个是简单地将“幻灯片”放置在一个容器内，然后动画。通常，容器绝对定位于将其从文档流中取出并加快处理速度（尤其是在使用 CSS3 时）。
接下来是在 DOM 中保留 4 到 8 个“幻灯片”，并在用户导航时附加/删除它们。
这些方法中哪一种是更好的方法？从 DOM 中添加/删除被认为是最昂贵的更改，但在这种情况下，它是否比在文档流之外操作包含 50 多个非常大图像的容器更便宜？尤其是在移动设备上。
我会在两者之间做点什么……除了在 dom 中显示的图像之外，我还会保留一些额外的图像……所以每当用户向左或向右滑动时……我会简单地显示一个已经下载的图像并附加到dom（非常便宜的操作）..
同时，我会删除远离 dom 的图像并将它们缓存到 javascript 数组中。
这样我就不会用太多的图像给 DOM 带来负担（你事先不知道滑块将包含多少张图像），同时我不会通过尝试在 DOM 明智地操作太多图像来损害用户体验
如果您想在使用大量幻灯片时最有效地使用内存，那么您可能希望一次只加载几张幻灯片图像（接下来的几张幻灯片），而不是整个集合。
同时，您需要预先加载一些即将发布的图像，以便在您想要显示它们时准备好它们，因为最耗时的任务是在显示之前通过互联网将图像下载到本地浏览器。
如果您只预加载一些即将发布的图像，那么您可以：
将它们预加载到img您在 javascript 中保存的对象中，然后在需要时将其插入 DOM。
将它们预加载到img已经在 DOM 中但隐藏的对象中，然后当您想要显示它时，可以使其可见。
只要您只预先加载几个图像并删除以前显示的图像，以便在不再需要时不会将它们保存在内存中，这两种方法之间应该没有显着差异。如果您真的想知道它们之间是否有任何可测量的差异（在内存消耗方面），您必须尝试设计一个性能测试以便进行测量。
过去我制作了可以显示大量图像的幻灯片，最重要的是确保幻灯片运行时不会累积内存使用量和使用越来越多的内存。当幻灯片最初运行时，内存使用量应该会增加，然后应该会变平并停止增加，因为您达到了一个稳定状态，即在加载新图像时释放旧图像。这在浏览器中有点难以衡量，因为它们还有内存缓存和惰性垃圾收集，这会掩盖幻灯片实际使用的内存，但是如果你让它运行足够长的时间处理大量图像并且它会继续永远向上，然后你知道你有一个问题需要解决。如果它停滞不前并且停止上升，那么你可能很好。