Javascript 使用jQuery按值选择选项的性能更好？

我正在努力解决一些JavaScript的性能问题，我已经研究了几天了。其中一项功能如下所示：

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人填写的表单，包含名字、姓氏和5个地址字段。我还加入了一个下拉列表，用于选择表单中已有的其他地址（

.primary\u address

）。此代码正在从主地址选择框中删除地址

---

我正试图弄清楚为什么这需要这么长时间，唯一突出的是

选项[value=？？]

部分。这是找到相关元素的最实用的方法，所以我使用了它。这两个选择器是否导致IE失去了它的午餐？

选项元素总是喜怒无常的。也许更简单的方法是获取所有SELECT元素，然后简单地查询它们的值。选定的选项也将始终将其值属性赋予选定项。因此：

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

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

---

也许其中一个会更快-不确定第二个是否有效。

你可以通过分解你的uber选择器字符串来加快速度

首先，从id开始，或者最好是缓存元素。然后使用

.children（）

获取

元素。不要使用
：has
选择器，而是使用
.has（）
。方法通常比复杂的选择器语法要快，因为jQ不必对字符串进行分割来理解您的意思。然后，正如Rafael所说，您可以跳过
：selected
，只查看匹配的
select
的值

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

作为第二个参数传递
formElem
，将其用作搜索的上下文，因此jQ不必从根开始

要
.remove（）
元素可以从上面缓存jQuery对象，也可以在
之后将其链接。每个（）
这样您就不必再次重新选择所有内容。
可以在removeAddress函数之外预计算$（'formId.add\u driver select'），然后重新使用它，这样removeAddress（）不必枚举那么多元素。
充分利用
过滤器
。应该足够快，但他肯定需要从id开始。我记得读过一些关于按类选择在ie中特别慢的内容。id可能更快，但我有20个主地址下拉列表，而不是一个。如果它们都在同一个表单中，请将id分配给表单。如果没有，则将其分配给最近的共同祖先。任何让jQ不必从根开始搜索的东西。好处取决于页面的结构。它肯定不会变慢，而且可能会显著加快。穿越需要时间。