jQuery：啥更有效？许多 ID 特定选择器，或一个“包含前缀选择器”

Posted 2023-03-05

【中文标题】jQuery：啥更有效？许多 ID 特定选择器，或一个“包含前缀选择器”

【英文标题】：jQuery: What is more efficient? Many ID specific selectors, or one "Contains Prefix Selector"jQuery：什么更有效？许多 ID 特定选择器，或一个“包含前缀选择器”

【发布时间】：2011-05-18 16:00:59

【问题描述】：

我在一个项目中有一个 javascript 的 sn-p，它在仪表板上缓存了一组 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 的 Contains Prefix Selector 是否更有效：

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

专业：对 jQuery 对象的引用更少 = 更快 Con: jQuery 不能使用document.getElementByID = 更慢

【参考方案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')
  
);

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

【参考方案2】：

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

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

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

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

还请注意according to this test，getElementById() 的性能在 IE6 和 IE7 中并不是非常令人兴奋。再次，IE8 确实支持querySelectorAll()，尽管确保它成功使用该特定选择器也不错。如果没有，查询将默认使用 Sizzle 的引擎。

---

Here's a test 直接通过querySelectorAll() 使用该选择器。您可以在不同的浏览器中运行它以查看它支持的位置。

---

还要注意，在 IE9 之前不支持 getElementsByClassName()，所以我怀疑使用类是否会提供比 'a[id|="dash"]' 更大的性能改进。 Firefox3 例外，它支持getElementsByClassName()，而不支持querySelectorAll()。

【参考方案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
);

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

【参考方案4】：

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

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