用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选择价值选项的性能更好？

回答

相关问题