jQuery遍歷vs僞類

我想知道jQuery選擇器中遍歷和僞類之間的區別。jQuery遍歷vs僞類

在包含以下內容的DOM：

<ul id="destination"> 
    <li>A</li> 
    <li>B</li> 
</ul>

以下的jQuery代碼將選擇相同的元素：

# Pseudo class 
$("#destination li:first"); 

# Traversing 
$("#destination").find("li").first();

聽說第二種方式更有效，儘管服用更多鍵盤。最佳做法是什麼？

來源

2014-11-01 Sung Won Cho

性能差異對於大多數應用程序來說是微不足道的。使用你認爲看起來更漂亮的任何一個。 – Pointy 2014-11-01 21:34:52

[css selectors vs jquery traversal]可能的重複（http://stackoverflow.com/questions/16308405/css-selectors-vs-jquery-traversal） – 2014-11-01 21:35:07

性能很差，僅僅是解析選擇器。 – 2014-11-01 21:40:59

您可以通過F12開發者工具測量效率。例如，以下是使用jQuery 2.1.2-pre的這兩種方法在Internet Explorer中的Profiler的輸出。

以下是使用$.fn.find和$.fn.first的結果。你會注意到它比使用僞類要少得多。

Traversal

如上所述，使用僞類（非標Sizzle句法糖）需要更多的工作：

Pseudo Classes

結果不言自明。雖然這些結果明顯不同，但不要讓這種或那種方式影響你。使用適合您項目的內容。實際的性能差異可以忽略不計，不值得關注。

來源

2014-11-01 21:49:38 Sampson

你如何做這樣的測試？我可以在我的瀏覽器上的開發工具的控制檯中鍵入我的命令，但我想知道圖片中顯示的詳細信息。 – 2014-11-01 22:03:52

@MikeC您可以在此處找到有關Internet Explorer的Profiler工具的更多信息：http://msdn.microsoft.com/en-us/library/ie/dn255005(v=vs.85).aspx。一旦你分析了你的應用程序，你就需要查看* Call Tree *而不是枚舉函數列表。 – Sampson 2014-11-01 22:08:23

jQuery遍歷vs僞類

回答

相關問題