2010-04-12 76 views
1

我有以下兩個代碼塊。jQuery選擇器性能

碼塊1

var checkboxes = $("div.c1 > input:checkbox.c2", "#main"); 
var totalCheckboxes = checkboxes.length; 
var checkedCheckboxes = checkboxes.filter(":checked").length; 

碼塊2

var totalCheckBoxes = $("div.c1 > input:checkbox.c2", "#main").length; 
var checkedCheckBoxes = $("div.c1 > input:checkbox.c2:checked", "#main").length; 

哪以上會更快一個?

謝謝,

的Rahul作爲過濾器被應用到包含所述選擇的元素已經對象

回答

2

數1將稍快是。 2號基本上執行相同的選擇器查詢兩次,第二次包括:checked選擇器epxression。

在現實中,這兩者之間的速度差是不會成爲一個攪局者:)

我傾向於使用

var checkboxes = $("#main").find("div.c1 > input:checkbox.c2"); 
var totalCheckboxes = checkboxes.length; 
var checkedCheckboxes = checkboxes.filter(":checked").length; 

直供方面將基本解決上述,但使用.find()已被證明是更快(我會挖掘參考,我相信它是在約翰Resig的博客)。

+0

但是,與Chrome或FF相比,此操作在IE中稍慢。 – rahul 2010-04-12 06:59:08

+1

那麼我的問題是,目標受衆的主要瀏覽器是什麼?使用能夠在大多數情況下提供最佳性能的方法?你如何衡量每個瀏覽器的性能以及IE的哪個版本? – 2010-04-12 07:03:26

+0

該網站必須在IE6 +,FF和Chrome上運行。我已經在IE6,7和8中測試過了。 – rahul 2010-04-12 07:09:07

1

也許寫一個小測試,並使用不同的瀏覽器進行基準測試。

0

如果你想要表現,不要那麼具體,如果你能避免它。例如,如果你只負擔得起查找類'c2',它應該提高選擇速度。

$("#main").find(".c2") 

應該是最快的解決方案。