jQuery：什么更高效？许多ID特定选择器，或一个“包含前缀选择器”可以被选择。

Question

我在一个项目中有一段 JavaScript 代码片段，它在仪表板上缓存了一组 jQuery 对象（锚标记）：

$.extend(cache, {
    dashboard : {
        buttons : [
            $('#dash-new-lead'),               $('#dash-jobs-calendar'),
            $('#dash-view-lead'),              $('#dash-sales-reports'),
            $('#dash-search-leads'),           $('#dash-new-job'),
            $('#dash-dispatch-jobs'),          $('#dash-dispatch-reports'),
            $('#dash-manage-employees'),       $('#dash-manage-trucks'),
            $('#dash-finalize-jobs'),          $('#dash-payment-profiles'),
            $('#dash-employee-statements'),    $('#dash-company-statements'),
            $('#dash-finance-reports'),        $('#dash-admin-sources'),
            $('#dash-admin-statuses'),         $('#dash-admin-companies'),
            $('#dash-admin-groups'),           $('#dash-admin-users'),
            $('#dash-admin-dispositions'),     $('#dash-search-jobs'),
            $('#dash-jobs-calendar-dispatch'), $('#dash-new-lead-dispatch'),
            $('#dash-finance-notices')
        ]
    }
});

每个链接稍后都会设置样式（使用 $.each）作为按钮。每个链接都有一个唯一的 jQuery UI 图标（因此 id 而不仅仅是类选择器）。根据用户的访问级别，某些链接可能存在也可能不存在于 DOM 中。

我现在想知道使用 jQuery 的 包含前缀选择器：

$.extend(cache, {
    dashboard : {
        buttons : $('a[id|="dash-"]')
    }
});

1. 优点：更少引用 jQuery 对象 = 更快
2. 缺点：jQuery 无法使用 document.getElementByID = 更慢

Answer 1

您可以创建一个包含所有标识的选择器：

$.extend(cache, {
  dashboard : {
    buttons : $('#dash-new-lead,#dash-jobs-calendar,#dash-view-lead,#dash-sales-reports,#dash-search-leads,#dash-new-job,#dash-dispatch-jobs,#dash-dispatch-reports,#dash-manage-employees,#dash-manage-trucks,#dash-finalize-jobs,#dash-payment-profiles,#dash-employee-statements,#dash-company-statements,#dash-finance-reports,#dash-admin-sources,#dash-admin-statuses,#dash-admin-companies,#dash-admin-groups,#dash-admin-users,#dash-admin-dispositions,#dash-search-jobs,#dash-jobs-calendar-dispatch,#dash-new-lead-dispatch,#dash-finance-notices')
  }
});

不过，我会考虑向按钮添加一个类，以便使用简单的选择器轻松定位它们。这将使维护代码变得更容易。

Answer 2

这在很大程度上取决于浏览器，因此您需要进行测试才能确定。

因为 'a[id|="dash"]' （注意我删除了 -） 似乎是有效的 querySelectorAll( ) 选择器，任何支持该方法的浏览器（包括 IE8）都应该具有非常好的性能。

因为您包含 tagName，所以不支持 querySelectorAll() 的浏览器将（我相信）使用 getElementsByTagName()，因此过滤器只会应用于它找到的 元素。

如果您能够将查询限制在比文档更窄的上下文中，它也会有所帮助。

另请注意，根据此测试，getElementById() 的性能在 IE6 和 IE7 中非常令人兴奋。 IE8 确实支持 querySelectorAll()，不过确保它在特定选择器上成功也不错。如果没有，查询将默认使用 Sizzle 的引擎。

---

这里有一个测试，直接通过 querySelectorAll() 使用该选择器。您可以在不同的浏览器中运行它以查看哪些地方支持它。

---

另请注意，IE9 之前不支持 getElementsByClassName()，因此我怀疑使用类是否会比 'a[id|="dash"]' 提供任何巨大的性能改进代码>. Firefox3 是个例外，它支持 getElementsByClassName()，但不支持 querySelectorAll()。

Answer 3

除了每个元素都有其唯一的 ID（dash-new-jobs 等）之外，还为其指定一个类 (class='dash-button')。

然后，您可以使用例如有效地引用整个集合

$.extend(cache, {
    dashboard : {
        buttons : $('.dash-button')
    }
});

，如果您需要像您提到的那样给它们提供所有不同的图标，请使用它们唯一的ID：

$('.dash-button').each(function() {
    // do something based on $(this).attr('id'),
    // which will be dash-new-job/dash-whatever
});

高效（尽管正如其他人所说，如果您不确定，请进行性能测试！），和干净/易于理解的代码（比使用“包含”选择器干净得多！）。

Answer 4

我建议您使用 contains 前缀方法，因为它更容易维护。您以这种方式进行设置，您不再需要担心要选择哪些 id，您只需定位那里的组即可。

虽然 id 方法可能具有更好的性能，但您要为每个方法创建一个 jQuery 对象。这也一定有影响。