2012-01-01 61 views
1

我已經完成了a test與性能的jQuery選擇器。選擇器的性能

兩個選擇我已經測試:

selection_width = total_width - ($('#commands .minimap').outerWidth() + $('#commands .actions').outerWidth()); 

和:

var commands = $('#commands'); 
selection_width = total_width - ($('.minimap', commands).outerWidth() + $('.actions', commands).outerWidth()); 

第二個比第一種方法更快。這是正確的還是我搞砸了測試的地方?

回答

2

在第一個測試中,jQuery使用兩次(相對較快)document.querySelectorAll()。在第二種情況下,jQuery一次使用document.getElementById()(非常快),並且使用document.getElementsByClassName()(自從您聲明瞭一個上下文以來快)兩次。

+0

您忽略了,命令保存。 – gdoron 2012-01-01 21:22:50

1

在第二個存儲命令元素,所以它不會再次搜索。因此你會獲得更好的表現。

+0

但它仍然需要搜索'minimap'和'actions'元素嗎?第二個比什麼快?我不明白這一點:P – PeeHaa 2012-01-01 21:17:11

+0

@PeeHaa,當然,如何將jQuery的發現呢? – gdoron 2012-01-01 21:18:18

+0

@PeeHaa,命令元素不會再次被重新搜索+'actions'+'minimap'。只有'行動'和'小地圖'。 – gdoron 2012-01-01 21:20:41

1

第一條語句必須分析整個DOM樹,並查找元素#commands的兩倍,而第二個只需要在整個DOM樹一個檢查。爲元素.minimap.actions搜索速度更快,因爲對於這一點,jQuery的只有迭代的#commands的孩子,而不是整個文件。