3

我有一个包含数百个“磁贴”的大页面，悬停在每个磁贴上会显示一个“弹出窗口”。Flyout 将包含比 Tile 更多的信息（和标记）。

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

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

因此，我还考虑了另一种方法：detach()对 DOM 中的所有 Flyout 使用 JavaScript（在页面加载时）。然后，当 Tiles 悬停时，Flyout 将重新附加。这提出了更高级别的复杂性，但页面性能至关重要。

总结一下我的问题：

display: none;和detached 元素之间有性能差异吗？

例如，如果页面有动画，那么大的（未显示的）DOM 会导致动画比纤细的 DOM 更不稳定吗？

4

1 回答 1

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;

请参阅此处了解更多信息：<script type = "text/template"> ... </script> 的解释

但正如评论中所说 - 你真的需要对这些东西进行基准测试才能做出最终决定。写一篇关于它的博客文章:)

于 2013-05-06T12:45:25.347 回答