Javascript 浏览器性能：`display:none`vs`.detach（）`

我有一个大页面，有数百个“瓷砖”，在每个瓷砖上悬停会显示一个“弹出按钮”。弹出按钮将包含比平铺更多的信息（和标记）

由于弹出型按钮最初不显示，最简单的实现是设置

display:none”，然后在磁贴悬停时切换

但是，我担心这种方法，因为这意味着DOM仍然包含所有弹出按钮。我反复听说，大型DOM对浏览器（尤其是移动浏览器）的性能有重大影响

因此，我还考虑了另一种方法：使用JavaScript从DOM（页面加载）中
detach（）
所有弹出按钮。然后，当平铺悬停时，弹出按钮将重新附着。这会带来更高的复杂性，但页面性能至关重要

总结我的问题:

显示：无之间是否存在性能差异和
分离
ed元素？
例如，如果页面有一个动画，那么大的（未显示的）DOM会导致动画比小DOM更不稳定吗？
一般来说，DOM操作是昂贵的，你必须考虑到，当页面加载DOM被创建时，所以当你运行你的脚本，它从DOM中分离出Flash时，你实际上只需要增加昂贵的工作而不是保存它。
如果弹出按钮显示的是css动画/翻译或类似内容（而不是移动DOM元素的位置，这将很糟糕），那么您可以借助硬件加速，即使在规格更低的设备上，性能也会非常好

如果在一个小屏幕的设备上出现很多（似乎有很多的）瓦片，也许你应该考虑只加载一个子集，然后按需要加载更多。
另一个想法是，如果将弹出式标记放在脚本标记中，它们可能实际上不会在加载时附加到DOM。然后，您可以根据需要将其拉入：
<script type="text/template" id="flyout-markup">
   <div class="flyout">Some info</div>
</script>



var flyoutMarkup = document.getElementById('flyout-markup').innerHTML;


一些信息
var flyoutMarkup=document.getElementById（'flyout-markup'）.innerHTML；

有关更多信息，请参见此处：

但是正如评论中所说的，你真的需要对这些东西进行基准测试，以做出最终决定。写一篇关于它的博文：）
如果你选择选项1，你将创建多少标记？（节点数和HTML的千字节数。）和所有与优化相关的问题一样，最好是在希望支持的（低端）移动设备上对页面进行基准测试。@Dogbert弹出按钮肯定会有大量的信息——比瓷砖还多。@icktoofay是的，我同意。但是，唯一的选择是使用AJAX加载这些内容，固有的延迟是不可接受的。谢谢您的回答。
模板可能有助于。。。我假设它将被视为文本节点，因此模板在使用之前不会被解析。这可能比显示：无要好，但您是对的，需要基准测试才能得到一些答案。