選擇器的性能

我試圖選擇符合某些標準的元素。現在我在做這樣的：選擇器的性能

$('[' + attr + '="' + name + '"]', el).filter('[type!="hidden"]').get(idx);

這是緩慢的地獄（在Opera 1400ms，〜在Chrome 120毫秒）

這個我以前：

$('[' + attr + '="' + name + '"][type!="hidden"]', el).get(idx);

這在Opera中花費了5-6秒。

（具有該代碼的函數被調用就像在一個頁面250-400次）

無論如何，它仍然是緩慢的，因爲我在做很多選擇，總負載仍然能夠在Opera超過2秒，取決於頁面內容。

你認爲我可以改進一點點的查詢嗎？

PS：「ATTR」有name值（name屬性），我只是作爲一個變量來測試，如果其他屬性都更快

來源

2012-03-30 thelolcat

我假設你想要選擇輸入元素，所以你可以添加'input [attr = value]'，你將只搜索輸入標籤，而不是全部在頁面中。 – hamczu 2012-03-30 17:13:27

「此代碼在頁面中被調用爲250-400次」。那可能與它有關。 – j08691 2012-03-30 17:23:18

我知道，但問題是有些元素依賴於其他元素，所以我必須做各種交叉檢查，這迫使我調用這個函數7-8倍頁面上的實際輸入元素數 – thelolcat 2012-03-30 17:25:09

嘗試使用標籤選擇。通過這種方式，瀏覽器可以將一些工作減到getElementsByTagName，而不是通過所有元素進行篩選。我猜根據type=hidden限定符input。

$(el).find('input[' + attr + '="' + name + '"]').filter('[type!="hidden"]').get(idx); 

//Don't actually call this too often unless the DOM is changing. Cache it and then call the get function. 
var resultSet = $(el.getElementsByTagName("input")) 
    .add(el.getElementsByTagName("select")) 
    .add(el.getElementsByTagName("textarea")) 
    .filter(function() { 
     //You may need to modify this section. select and textarea don't have a type attribute. 
     return this.getAttribute(attr) == name && this.getAttribute("type") == "hidden"; 
    }); 

//Call later 
resultSet.get(idx);

來源

2012-03-30 17:13:52 Dennis

問題是我需要這'輸入，textarea，選擇'不只是'輸入':)我害怕添加3個選擇器，它可能會變得更糟 – thelolcat 2012-03-30 17:17:56

什麼是類型屬性意味着選擇和textarea？ – Dennis 2012-03-30 17:22:31

沒什麼，隱藏的確實不需要這兩個 – thelolcat 2012-03-30 17:25:53

如果您有能力在後端修改標記本身，請爲每個元素添加一個公共類。然後，您可以簡單地按照速度更快的課程進行選擇。

此外，如果您的頁面很大，但這些輸入僅在屏幕的一部分中，請使用共同的父級縮小範圍。 $("#parent <otherselector>")

來源

2012-03-30 17:21:19

我可以在他們所有人之前添加一個類，然後我正在做我的事情（用jquery）。我會嘗試 – thelolcat 2012-03-30 17:22:40

選擇器的性能

回答

相關問題