Question

我有一个带有标题文字的div：

<div class="vehicleCntr" id="vehicles">
    <div class="header">
        <h3 id="name"> Trucks </H3>
    </div>

标题H3中的文字只能采用2个值：卡车或汽车。除了这两个之外，永远不会有其他价值。点击汽车超链接标题必须更改为“汽车”，点击卡车超链接标题必须更改为“卡车”。

我应该只删除h3的文本并在每次点击时替换它，或者我应该有2个H3，如下所示并切换可见性：

 <div class="header">
        <h3 id="trucks"> Trucks </H3>
        <h3 id="cars"> Cars</H3>
    </div>

我正在考虑这两种方法之间的性能优势。因为我认为它涉及重绘和/或重排。

Answer 1

每次都会发生重新流动，所以我认为两者之间并没有太大区别。我会选择第二个，因为我不必总是在DOM中添加/删除新东西。

Answer 2

使用.text()的第一种方法似乎最快：http://jsperf.com/text-vs-toggle

虽然在更大的方案中，除非有数百个元素在变化，试图找到最快的似乎是微优化。

Answer 3

我认为你也应该考虑语义。有两个H3标签说不同的东西肯定会混淆搜索引擎和使用不关心CSS的浏览器的人。

Answer 4

我认为防止重排的唯一方法是使用visibility:hidden，但元素仍会占用屏幕上的空间。如果要删除/隐藏它，则需要重排。我会说display:none是你当时的最好成绩。

编辑：上面的代码片段是CSS规则。

Answer 5

在我看来，性能差异并不值得担心，因此我会根据其他标准进行选择。具体来说，我可能会选择第二种方法，切换可见性，这样如果将来你想要改变与每个单词相关的格式，你可以在HTML / CSS中定义它并保持JS简单 - 例如，你可能会定义与每个单词相关联的背景图片。