用jQuery選擇價值選項的性能更好？

我正在嘗試解決一些我一直在工作幾天的JavaScript的一些性能問題。其中一個功能件的低於：用jQuery選擇價值選項的性能更好？

var removeAddress = function(pk) { 
    var startTime = new Date(); 
    jQuery('.add_driver select.primary_address:has(option[value=' + pk + ']:selected)').each(function(c, o) { 
     console.log("Shouldn't get here yet..."); 
     showInputs(o); 
    }); 
    console.log('removeAddress1: ', (new Date() - startTime)/1000); 
    jQuery('.add_driver select.primary_address option[value=' + pk + ']').remove(); 
    console.log('removeAddress2: ', (new Date() - startTime)/1000); 
};

此代碼是非常強力的Firefox中：

removeAddress1: 0.004 
removeAddress2: 0.023

但在IE8它是另一個故事：

LOG: removeAddress1: 0.203 
LOG: removeAddress2: 0.547

中的表單問題是一個20個人的名字，姓氏和地址字段。我還下拉選擇了其他已經存在於表格中的地址（.primary_address）。此代碼正在從主地址選擇框中刪除地址。

我想明白爲什麼這需要這麼長時間，唯一突出的是option[value=????]部分。這是找到有問題的元素的最實用的方法，所以我用它跑。這兩個選擇器是否會導致IE失去午餐？

來源

2010-07-21 Jack M.

該選項元素總是脾氣暴躁。也許只需要獲取所有的SELECT元素，然後簡單地查詢它們的值就簡單多了。所選的OPTION總是會給它的值屬性給SELECT。所以：

jQuery('.add_driver select.primary_address').filter(function() { 
    return $(this).value === pk; 
}); 

jQuery('.add_driver select.primary_address[value='+pk+']');

也許其中一個會更快 - 不知道如果第二個將工作。

來源

2010-07-21 20:25:24 Rafael

很好的使用'filter'。應該足夠快，但他肯定需要從一個ID開始。我記得讀過一些關於按照課程選擇特別緩慢的東西...即 – jasongetsdown 2010-07-21 20:42:24

ID可能會更快，但我有20個主要地址下拉列表，而不是一個。 – 2010-07-21 20:47:12

如果它們全都以相同的形式將id分配給表單。如果不是，則將其分配給他們最近的共同祖先。任何讓jQ不必從根開始搜索的東西。好處取決於你的頁面結構。它肯定不會變慢，並且可能會更快。遍歷需要時間。 – jasongetsdown 2010-07-21 20:57:10

通過打破你的超級選擇器字符串，你可能會加速很多。

首先，從一個id開始，或者更好的是一個緩存元素。然後使用.children()獲取您的select元素。而不是使用:has選擇器使用.has()。方法通常比複雜的選擇器語法更快，因爲jQ不必分割字符串來找出你的意思。然後，正如拉斐爾所說，你可以跳過:selected，只看匹配的select的值。

formElem = document.getElementById('formId'); 
jQuery('.add_driver', formElem) 
    .children('select.primary_address') 
     .has('[value=' + pk + ']') 
     .each(...);

傳遞formElem作爲第二ARG使用它作爲搜索的上下文，這樣JQ沒有從根本入手。

到.remove()這些元素要麼從上面緩存jQuery對象，要麼在.each()之後鏈接它，因此您不必再次重新選擇所有內容。

來源

2010-07-21 20:37:38 jasongetsdown

也許在removeAddress函數之外預計算$（'formId .add_driver select'），然後重用它，這樣removeAddress（）就不必枚舉如此多的元素。

來源

2010-07-21 20:58:35

用jQuery選擇價值選項的性能更好？

回答

相關問題