高效的DOM选择技巧 - 按属性选择慢？

我正在使用脚本使所有输入在尚未支持该功能的浏览器中具有占位符。高效的DOM选择技巧 - 按属性选择慢？

在该脚本，我使用

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

选择所有元素作用于。

我在想，如果这也许会是因为它不是一个很具体的减缓选择像

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

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

你会建议增加班所有占位符输入属性约像这样：

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

做出选择更快的（我认为选择类是比速度属性附加伤害）。但是，这会滥用CSS类的目的，只意味着风格，它会填满dom。

您有任何建议或技巧来改善这些任务吗？

来源

2011-02-22 Hans

爽哦，didn't知道。看起来像按班选择的确更快。 – Hans 2011-02-22 22:37:05

那么，你可以给你的表格一个id，然后使用$("#theForm input[placeholder]")这将减少选择器有多少元素需要考虑。

来源

2011-02-22 22:18:47 araqnid

是的，但我有很多形式，不想指定每一个。 – Hans 2011-02-22 22:20:19

我想在这种情况下这不是一场胜利。选择“输入”的某个限定符应至少使用'document.getElementsByTagName'或类似的东西。所以如果你认为检查类更快，也许$（“input.iHaveaPlaceholder”）。 – araqnid 2011-02-22 22:23:34

我会好奇$（“form input [placeholder]”）与$（“input [placeholder]”）。我们都知道输入应该是形式化的，但我想其他地方的一个独立输入也会匹配，证明引擎正在查看整个DOM。缩小到表单元素应该会提升性能。 – Capsule 2011-02-22 22:27:17

这并不慢（你测试过或只是猜测？）。 但如果它是使用类。

来源

2011-02-22 22:22:07 galambalazs

有趣矛盾的答案;-) – Capsule 2011-02-22 22:28:32

不是吗？ :)不，我的意思是我敢打赌，他没有任何性能问题，他只是担心没有很好的理由。但班级速度更快，这是事实。 – galambalazs 2011-02-22 22:42:25

不在IE6中！ ;）（我说过多少次......） – gnarf 2011-02-23 01:03:30

除非你有一个巨大的DOM，我不认为性能差异应该真的发挥作用。就像你说的那样，为了“优化”的目的设置了很多类，它们会与文档的逻辑结构混淆。

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

来源

2011-02-22 22:22:13

我继续和比较选择input[placeholder]，.hasPlaceholder和input与.filter()做了JSPerf。

既然我们有一些需要思考的数字，让我们来谈谈为什么你想知道。

什么时候你在做这个搜索'input[placeholder]'？希望只有一次。如果你在现代浏览器中使用这两种选择器，他们会很快（数量是每秒操作数......）。但是，如果您知道只在不支持占位符的浏览器上运行此选择器，则在列出的三种方法中，.hasPlacehoder实际上是IE 6中速度最慢的，自定义筛选器获胜。你想尝试在浏览器中测试这个代码实际上会影响的性能。

随意添加你自己的选择器，或者更好地接近你的确切的HTML到那个页面，并请求一些浏览器测试！

编辑：我加input.hasPlaceholder到了比赛上一个新的香水，卫生

来源

2011-02-23 00:46:48 gnarf

+1不仅我不知道JSPerf是否存在，结果令人惊讶！（使用过滤器的速度是使用'input [placeholder]'的速度的两倍） – Justin 2011-02-23 01:08:09

@Kragen - '$（'input'）'优化为['getElementsByTagName']（https://developer.mozilla.org/ en/DOM/element.getElementsByTagName），然后通过过滤器函数快速运行。在不支持['querySelectorAll']（https://developer.mozilla.org/En/DOM/Document.querySelectorAll）的浏览器中，它可能是最快的.. – gnarf 2011-02-23 01:13:25

哇实际分析？谁会抢劫它？伟大的测试和真正令人惊讶的结果！我真的希望元素选择器比类选择器更快。莫名其妙。 – 2011-02-25 09:46:32

高效的DOM选择技巧 - 按属性选择慢？

回答

相关问题