通过 style.display 隐藏或复制整个 DIV 是否更快？答案

【问题标题】：Is it faster to hide by style.display or copy entire DIV?通过 style.display 隐藏或复制整个 DIV 是否更快？
【发布时间】：2013-03-21 16:29:18
【问题描述】：

我正在用 html 创建一个演示文稿。它应该类似于 MS Office 中的 powerpoint。它将具有所有幻灯片的预览，并且将在窗口中一次显示一张幻灯片。我确实有一张幻灯片列表，并且可以通过 Javascript 播放它们。我可以将它们缩小到预览中。

关于显示的一张幻灯片： 我想知道将所有显示的幻灯片的副本放在一个包装器 div 中并通过设置 display 属性使它们一一可见是否会更好。或者，如果一次将一张幻灯片复制到此包装 div 中会更好。

为了清楚起见......我得到了这样的东西

<body>
 <div class="slide">/*slide stuff*/</div>
 <div class="slide">/*slide stuff*/</div>
 <div class="slide">/*slide stuff*/</div>
 <div class="slide">/*slide stuff*/</div>
</body>

我把它转换成这个

<body>
 <div id=preview>
  <div class="slide" id="1">/*slide stuff*/</div>
  <div class="slide" id="2">/*slide stuff*/</div>
  <div class="slide" id="3">/*slide stuff*/</div>
  <div class="slide" id="4">/*slide stuff*/</div>
 </div>
 ...

现在我应该通过更改显示属性来显示它们。所以html继续这样：

...
 <div id="mainwindow">
  <div class="slide" id="p1" display="none">/*slide stuff*/</div>
  <div class="slide" id="p2" display="none">/*slide stuff*/</div>
  <div class="slide" id="p3" display="none">/*slide stuff*/</div>
  <div class="slide" id="p4" display="none">/*slide stuff*/</div>
 </div>
</body>

或者我应该将mainwindow div 设为空，然后在每次更换幻灯片时将幻灯片复制到其中？

...
 <div id="mainwindow">
 </div>
</body>

如果对这两种解决方案的速度发表任何评论（如果幻灯片包含其他标签），我将不胜感激，并且由于这是学校作业，我想知道哪种解决方案会被认为是“更清洁”和/或更“专业”。

【问题讨论】：

您可能想尝试在 jsperf.com 上对其进行基准测试
您只是将其创建为“一次性”，还是实际上是在创建一个框架来交付任何演示文稿？但我同意 Dogbert - 对其进行基准测试
这个想法是有一个脚本 + 一个 css 表，可以附加到任何包含 class="slide" 的 html 文件中

标签： javascript html

【解决方案1】：

当您转到下一张幻灯片时，使用element.style.display 隐藏将比复制元素快得多。复制需要更改 DOM，这总是比简单地隐藏元素更昂贵。

我能看到的唯一情况是，当您拥有数百张幻灯片时。页面的剪切大小可能会使浏览器变慢。

【讨论】：