當使用大量選擇器時，jQuery性能會降低多少，或者它會如何？

當鏈接的href指向具有特定擴展名的文件時，我想將click（）事件應用於頁面上的所有鏈接。適用的擴展名列表徘徊在30左右，未來可能會增長一些（但不會超過100）。當使用大量選擇器時，jQuery性能會降低多少，或者它會如何？

我的第一個傾向是組織活動，像這樣綁定：

$("a[href$=avi], 
    a[href$=ppt], 
    a[href$=rtf], 

// ...snip a bunch more of these.... 

    a[href$=pdf], 
    a[href$=xml]").click(function() { 
     // Do something 
});

這是瘋了嗎？

來源

2009-12-03 GloryFish

我會選擇所有的鏈接，然後將其過濾點擊功能裏面，比如像這樣：

$('a').click(function() { 
    var ext = /[^.]+$/.exec($(this).attr('href')); 
    switch(ext) { 
     case 'avi': 
     case 'ppt': 
     ... 
     case 'xml': 
      // Do something 
      break; 
    } 
});

節省了大量穿越的，是漂亮得多也。

你的方法的壞處是，jQuery可能會獨立處理你的每個選擇器，因此在它完成第一個選擇器的搜索之後，它完全忘記了它找到的其他東西，並再次搜索整個文檔以用於下一個選擇器。使用這種方法，jQuery只需要搜索一次所有鏈接，並且在函數內部使用switch-case可能非常快，您不必爲性能問題而煩惱。

來源

2009-12-03 20:06:10

這增加了點擊處理程序的所有鏈接，但。只是它沒有做任何事情，除非href匹配。只將處理程序應用於匹配鏈接的解決方案會更好。查看我的過濾器示例。 – tvanfosson 2009-12-03 23:14:55

@tvanfosson：你說得對，這個方法做了一些不必要的綁定，但在你的方法中，jQuery仍然需要做一些額外的解析和遍歷，這總是比開關大小慢。所以，性能方面，這種方法更好。 – 2009-12-04 10:20:25

我會給你一個提示 - 幾乎可以肯定。我做了這樣的事情，這非常痛苦。我嘗試另一種方法，存儲每個選擇的結果，在一個數組，然後做$（陣列）。點擊（）快得多（尤其是IE6/P3 900 MHz）的

這就是說，你應該基準和爲您的應用程序找到最快的方式。用IE6找一臺老舊的電腦，或者用IE6找一臺虛擬機，然後測試一下這個時間。選擇器調整（並查看哪些是緩慢的，以及如何避免調用它們）是我的第一站JavaScript優化。

來源

2009-12-03 20:11:21

+1進行基準測試 – GloryFish 2009-12-03 20:14:02

我會考慮使用過濾器功能，而不是一組選擇的：

$('a').filter(function() { 
      return $(this).attr('href').match(/(avi|ppt|...|xml)$/) != null; 
     }) 
     .click(function() { 
      // do something 
     });

來源

2009-12-03 20:19:03 tvanfosson

當使用大量選擇器時，jQuery性能會降低多少，或者它會如何？

回答

相關問題