一千萬個為什麽

搜索

JQuery:選擇器性能

我有以下HTML:

...
<div id="panel">
    <div class="abc">
        
Hello

</div> </div> ...

Question: What's the fastest way with jQuery for me to access the p.xyz element? I've read some performance reviews but they don't account for all different scenarios.

我可以做以下,但不知道如何測試哪個是最快的。

$('.xyz');
$('p.xyz');
$('#panel .xyz');
$('#panel p.xyz');
$(".xyz", $('#panel'));

我確信還有更多方法可以訪問該節點。

>>> Which is the fastest and recommended way?

最佳答案

任何時候你都可以使用ID選擇器,它會更快。 jQuery選擇器引擎(Sizzle)從右到左讀取。唯一的例外是如果在最左邊是 id ,那麽 id 用於搜索範圍。

此外,由於jQuery盡可能使用本機瀏覽器功能,因此始終在使用類選擇器時提供標記名稱。

在一系列關於“什麽是更快”的選項中,這將是最快的:

$('#panel p.xyz');

因為它會將搜索範圍限定為單個元素,然後找到 p 標記,然後從選擇中刪除所有沒有正確類的標記。

在某些瀏覽器中,與不應匹配您的查詢的許多其他同級 p 標記相比,它的執行速度要快於:

$('#panel .xyz');

請記住,jQuery使用盡可能多的本機功能。 每個主流瀏覽器都有 getElementById 所以盡可能使用 id

接下來,每個瀏覽器都有一個 getElementsByTagName 。一些瀏覽器沒有的是 getElementsByClassName 。因此,幫助jQuery通過使用 id 來盡可能地幫助您搜索範圍,並將標記名稱與類搜索的類配對。

永遠不要將jQuery對象作為範圍參數傳遞

你應該從未做的一件事是你的最後一個例子:

$(".xyz", $('#panel'));

與使用普通字符串相比,這沒有速度影響(並且在循環中它會更慢)。每次只將DOM元素傳遞給此參數。當您已經擁有DOM元素時,這非常有用:

$("#panel").click(function(){
  var p = $("p.xyz", this);//This is fast
});

轉載註明原文: JQuery:選擇器性能