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

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

本文关键字：html 元素 更好 拥有 什么时候      更新时间：2023-09-26

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

我正在为一个内容丰富的社交网站开发导航栏。我正在使用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元素数量和性能之间关系的信息。希望这里有人能帮我。

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

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

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

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

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

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

相关文章：