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