浏览器性能：`display：none`与`.detach（）`

Question

我有一个包含数百个“Tiles”的大页面，并且悬停在每个图块上会显示“Flyout”。 Flyout将包含比Tile更多的信息（和标记）。

由于最初没有显示弹出窗口，最简单的实现方法是在弹出窗口上设置display: none;，然后在平铺图块时切换。

但是，我很担心这种方法，因为这意味着DOM仍将包含所有Flyout。我反复听说过，大型DOM会对浏览器产生重大的性能影响，尤其是移动浏览器。

所以，我还考虑了另一种方法：使用JavaScript detach()来自DOM的所有Flyout（在页面加载时）。然后，随着Tiles的徘徊，Flyout将重新连接。这提供了更高级别的复杂性，但页面性能至关重要。

总结我的问题：

display: none;和detach ed元素之间是否存在性能差异？

例如，如果页面有动画，那么大（未显示）的DOM是否会导致动画比苗条DOM更不连贯？

Answer 1

一般来说，DOM操作很昂贵，你必须考虑在页面加载时创建DOM，所以当你运行你的脚本从DOM中分离出来的时候，你实际上只会添加昂贵的工作而不是而不是保存它。

如果正在使用css动画/翻译或类似的方式显示弹出窗口（而不是移动DOM元素的位置 - 这将是不好的），您可以捎带硬件加速，即使是更低规格的设备，性能也会很好。

如果您在具有小屏幕的设备上出现很多（数百个似乎很多）的图块，可能您应该考虑只加载一个子集然后根据需要加载更多。

另一个想法 - 如果你将你的弹出标记放在脚本标记中，它们实际上可能不会在加载时附加到DOM。然后你可以根据需要拉入它们：

<script type="text/template" id="flyout-markup">
   <div class="flyout">Some info</div>
</script>



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

有关详细信息，请参阅此处：Explanation of <script type = "text/template"> ... </script>

但正如评论中所说 - 你真的需要对这些事情进行基准测试以做出最终决定。写一篇关于它的博文：）