什么时候拥有更多或更少 html 元素更好？

Question

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

我正在为 content-heavy 社交网站开发导航栏。我正在使用 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 元素的数量与 google 上的性能之间的关系。希望这里有人能帮助我。

Answer 1

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

您可以根据需要将您的代码构造得尽可能漂亮和易于管理。但是，您应该记住，您的相关 javascripts written/loaded 不会对文档的性能造成足够的压力。

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

Answer 2

您不必担心 html 元素的数量，因为实际上大多数浏览器可以处理比您所谈论的差异大得多的内存使用量。

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

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

什么时候拥有更多或更少 html 元素更好？

When is it better to have more or less html elements?

html

javascript

css

performance

flexbox