有什么更好？切换可见性或处理文本

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

在标题H3的文字只能取两个值：卡车和汽车。除了这两者之外，再也没有别的价值。点击汽车超链接时，标题必须更改为“汽车”，点击卡车超链接，标题必须更改为“卡车”。

如果我只是删除H3的文字和取代它每次被点击，或者我应该有2 3H公司像下面和切换能见度：

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

我正在考虑的性能优势，如果这些2之间方法。因为我认为它涉及重绘和/或回流。

2011-12-13 ChrisOdney

这与JS性能无关，它关乎浏览器（引擎）的性能。 – Lucero

您是否注意到这会导致性能瓶颈？因为如果没有，你可能会浪费时间节省一两毫秒。 –

“程序员浪费大量时间思考或担心程序中非关键部分的速度，而这些效率方面的尝试实际上在考虑调试和维护时会产生强烈的负面影响，我们应该忘记小的效率大约97％的时间：不成熟的优化是万恶之源，但我们不应该在这个关键的3％中放弃我们的机会。“ ~~~ DonaldKnuth – graphicdivine

每次都会发生回流，所以我认为两者之间没有太大的区别。但是我会选择第二个，因为我不一定要在DOM中添加/删除新的东西。

2011-12-13 09:41:17 alessioalex

我相信阻止回流的唯一方法是使用visibility:hidden，但是该元素仍然占用屏幕上的空间。如果您想要移除/隐藏它，则需要重新焊接。那么我认为display:none是你最好的投篮。

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

2011-12-13 09:44:56 bennedich

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

虽然在事物的更大的计划，除非有数百个要素的变化，试图找到最快的似乎是微型优化。

2011-12-13 10:23:23

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

2011-12-13 11:05:58 nnnnnn

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

2011-12-13 11:12:02 Filip

回答