高效的 DOM 选择技术 - 按属性选择会变慢吗？

Posted 2023-03-05

【中文标题】高效的 DOM 选择技术 - 按属性选择会变慢吗？

【英文标题】：Efficient DOM Selecting Techniques - Is selecting by attribute to slow?

【发布时间】：2011-07-02 08:43:19

【问题描述】：

我正在使用脚本使所有输入在尚不支持该功能的浏览器中具有占位符。

在我正在使用的那个脚本中

$('input[placeholder]').each(function() 

选择所有要操作的元素。

我想知道这是否会变慢，因为它不是一个非常具体的选择

$('#input').each(function() 

我知道选择方式更快（但我不想单独指定所有 id）。

您是否建议向所有具有占位符属性的输入添加类，如下所示：

$('.iHaveaPlaceholder').each(function() 

使选择更快（我认为按类选择比按属性选择更快）。但这会滥用 css 类的目的，只意味着样式，它会填满 dom。

您对改进此类任务有什么建议或技巧吗？

【问题讨论】：

哦，酷，不知道。似乎按班级选择确实更快。

【参考方案1】：

好吧，你可以给你的表单一个 id，然后使用 $("#theForm input[placeholder]") 这将减少选择器必须考虑的元素数量。

【讨论】：

是的，但是我有很多表格，不想一一指定。

我想在这种情况下这对你来说不是一个胜利。选择“输入”的一些限定词至少应该使用document.getElementsByTagName 或类似的东西。所以如果你认为检查类更快，也许 $("input.iHaveaPlaceholder").

我很想将 $("form input[placeholder]") 与 $("input[placeholder]") 进行比较。我们都知道输入应该是表单，但我猜其他地方的隔离输入也会匹配，证明引擎正在查看整个 DOM。缩小到表单元素应该会稍微提高性能。

CSS 选择器应用right to left。虽然 jQuery 可能会做一些不同的事情，但如果它使用浏览器的原生 querySelector 函数，它实际上会匹配所有 input[placeholder]，然后过滤掉不是 #theForm 后代的那些。

我刚刚发现了这个测试网站。我不认为它更快（如果测试设置正确）jsperf.com/attr-selector/2

【参考方案2】：

并不慢（您是否进行了测试或只是推测？）。 但如果是，请使用类。

【讨论】：

有趣的矛盾答案 ;-)

不是吗？ :) 不，我的意思是我打赌他没有任何性能问题，他只是无缘无故地担心。但是课程更快，这是事实。

【参考方案3】：

除非您拥有庞大的 DOM，否则我认为性能差异不会真正发挥作用。就像你说的那样，为了“优化”而设置大量的类会破坏文档的逻辑结构。

按类选择，不提供上下文，仍然会导致整个 DOM 被遍历。我认为按元素选择也是如此。在这里使用占位符类绝对不是答案。您想要做的是找到具有特定属性的所有输入元素 - 并且您为此目的使用了正确的选择器。

【参考方案4】：

我继续创建了一个JSPerf，用于将选择器input[placeholder]、.hasPlaceholder 和input 与.filter() 进行比较。

现在我们有一些数字要考虑，让我们谈谈您想知道的原因。

您何时搜索'input[placeholder]'？希望只有一次。如果您在现代浏览器中执行这些选择器中的任何一个，它们将非常快速（数字是每秒操作数......）。但是，如果您知道您只在不支持占位符的浏览器上运行此选择器，那么在列出的三种方法中，.hasPlacehoder 实际上是 IE 6 中最慢的，其中自定义过滤器获胜。您想尝试在此代码实际影响的浏览器中测试性能..

随意添加您自己的选择器，或者更好地接近您对该页面的确切 html 并征求一些浏览器测试！

编辑：我在比赛中添加了input.hasPlaceholder 的新性能...

【讨论】：

+1 我不仅不知道 JSPerf 的存在，而且结果令人惊讶！ （对我来说，使用过滤器的速度是使用 input[placeholder] 的两倍）

@Kragen - $('input') 优化为getElementsByTagName，然后通过过滤功能快速运行。在不支持querySelectorAll的浏览器中，它可能是最快的..

哇实际的分析？谁会想到呢？伟大的测试和真正令人惊讶的结果！我真的希望元素选择器比类选择器更快。莫名其妙。