浏览器性能:' display:none ' vs .detach() '

Browser Performance: `display:none` versus `.detach()`

本文关键字：detach vs none 性能 浏览器 display      更新时间：2023-09-26

我有一个很大的页面，上面有数百个" tile "，将鼠标悬停在每个tile上会显示一个"Flyout"。弹出窗口将包含比Tile更多的信息(和标记)。

由于最初不显示Flyouts，最简单的实现是在Flyouts上设置display: none;，然后在Tile悬停时切换。

然而，我担心这种方法，因为它意味着DOM将仍然包含所有的flout。我经常听说，一个大的DOM对浏览器的性能有很大的影响，尤其是移动浏览器。

所以，我也考虑了另一种方法:使用JavaScript从DOM(页面加载)detach()所有的floutts。然后，当tile悬停时，Flyout将被重新连接。这带来了更高层次的复杂性，但页面性能是至关重要的。

总结一下我的问题:

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

例如，如果页面有一个动画，那么大的(未显示的)DOM会比小的DOM导致动画更加不稳定吗?

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

如果显示的是css动画/翻译或类似的(而不是移动DOM元素的位置-这将是糟糕的)，你可以搭载硬件加速，性能可以在更低规格的设备上很好。

如果你在一个小屏幕的设备上出现了很多(数百个看起来很多)瓷砖，也许你应该考虑只加载一个子集，然后根据需要加载更多。

另一个想法-如果你把你的弹出标记在脚本标签，他们可能实际上不附加到DOM加载。然后，您可以根据需要将它们拉进来:

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

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

查看更多信息:说明

相关文章：