Question

标题问题很好地总结了我的想法，但让我解释一下我是如何得到这个问题的。

我正在为一个内容丰富的社交网站上的导航栏工作。我正在使用flexbox来对齐导航项。首先，我在所有这些项目周围包裹了一个div标签，但后来我问自己，为什么我可以在没有的情况下添加更多代码。或者更一般地说，如果我有很多html元素，整体性能会变差，尤其是关于javascript / jquery。我想是这样的..但也许有时候，添加更多元素以获得更清晰的结构甚至W3c规则强制要求更明智吗？

导航栏HTML代码看起来像这样使用最少数量的元素（我删除了大部分的id类和css，以保持清晰）：

<body>
    <nav class="flexBox">
        <a class="flexItem">
          <!--icon background image-->
        </a>
        <form class="flexItem">
          <!--search form content-->
        </form>
        <ul class="flexItem">
          <!--some li elements-->
        </ul>
        <div class="flexItem">
            <!--some grouped content-->
        </div>
        <a class="flexItem">
          <!--icon background image-->
        </a>
    </nav>
</body>

CSS：

.flexItem{
  display: block;
}
.flexBox{
  display:flex;
  flex-direction:row;
}

这样做是否合法？这样做是明智的吗？与围绕它的div包装相比，性能是否更好（假设整个页面上有很多js）。

我没有找到关于HTML元素数量与谷歌性能之间关系的任何信息。希望有人能帮到我。

Answer 1

对于您为浏览器构建文档的方式绝对没有限制。

您可以根据需要将代码结构精美且易于管理。但是，您应该记住，由您编写/加载的相关javascripts不会对文档的性能造成足够的压力。

例如，在可能阻止浏览器的鼠标悬停事件上编写一些事件处理程序[考虑循环是脚本化的或其他一些长时间运行的操作]。

Answer 2

你不应该关心html元素的数量，因为实际上大多数浏览器可以处理比你所讨论的差异更重的内存使用量。

事情的javascript方面可能更令人担忧。如果你有很多元素并且用jquery引用它们，那么可能需要大量的内存分配，这可能是一个问题。通过适当的内存管理和对范围和初始化等方面的关注，对您来说不应该是一个问题。

无论您使用多少元素，都应该使用最适合您任务的html数量。

什么时候有更多或更少的HTML元素？

2 个答案: