有什麼更好？切換可見性或處理文本

<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

回答