高效的 DOM 选择技术 - 按属性选择是否很慢？
我正在使用脚本使所有输入在尚不支持该功能的浏览器中具有占位符。
在该脚本中，我用来
$('input[placeholder]').each(function() {
选择要执行操作的所有元素。
我想知道这是否会变慢，因为它不是一个非常具体的选择，
$('#input').each(function() {
我知道它的选择速度更快（但我不想单独指定所有 id）。
您是否建议向所有带有占位符属性的输入添加类，如下所示：
$('.iHaveaPlaceholder').each(function() {
以使选择更快（我认为按类选择比按属性选择更快）。但这会滥用 css 类的用途，仅用于样式，并且会填满 dom。
您对改进此类任务有什么建议或技巧吗？
I am using a script to make all inputs having a placeholder in browsers that dont yet support that feature.
In that script I am using
$('input[placeholder]').each(function() {
to select all the elements to act on.
I was wondering if that maybe would be to slow since its not a very specific select like
$('#input').each(function() {
which I know selects way faster (but I dont want to specify all the id´s separately).
Would you recommend adding classes to all the inputs with placeholders atribute like so:
$('.iHaveaPlaceholder').each(function() {
to make selecting faster (I think selecting by class is faster than by atribute). But this would misuse the purpose of css classes only meaning to style and it would fill up the dom.
Do you have any suggestions or techniques as to improve tasks like these?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我继续制作了一个 JSPerf 来比较选择器
input[placeholder]、.hasPlaceholder和input以及.filter ()。现在我们有一些数字需要考虑，让我们谈谈为什么你想知道。
您什么时候搜索
'input[placeholder]'？希望只有一次。如果您在现代浏览器中执行这些选择器中的任何一个，它们将非常快（数字是每秒操作数......）。但是，如果您知道您只在不支持占位符的浏览器上运行此选择器，则在列出的三种方法中，.hasPlacehoder实际上是 IE 6 中最慢的，自定义过滤器获胜。您想尝试测试此代码实际上会影响的浏览器的性能。请随意添加您自己的选择器，或者更好地接近该页面的确切 HTML，并请求一些浏览器测试！
编辑：我添加了
input.hasPlaceholder以新的性能参加比赛...I went ahead and made a JSPerf for comparing the selectors
input[placeholder],.hasPlaceholderandinputwith a.filter().Now that we have some numbers to think about, lets talk about why you want to know.
When are you doing this search for
'input[placeholder]'? Hopefully only once. If you do either of these selectors in a modern browser, they will be pretty speedy (the number is operations per second....). However if you know you are only running this selectors on browsers that don't support placeholders, of the three methods listed, the.hasPlacehoderis actually the slowest in IE 6, with the custom filter winning. You want to try testing performance in the browsers that this code will actually affect..Feel free to add your own selectors, or even better closer to your exact HTML to that page and solicit some browser testing!
Edit: I added
input.hasPlaceholderto the race on a new perf...除非你有一个巨大的 DOM，否则我认为性能差异不会真正发挥作用。正如您所说，出于“优化”的目的设置大量类会扰乱文档的逻辑结构。
按类选择，不提供上下文，仍然会导致整个 DOM 被遍历。我认为按元素选择也是如此。在这里使用占位符类绝对不是答案。您想要做的是查找具有特定属性的所有输入元素 - 并且您为此目的使用正确的选择器。
Unless you have a massive DOM, I don't think the performance difference should really come into play. Setting a whole lot of classes for the purposes of 'optimizing', like you said, messes with the logical structure of your document.
Selecting by class, without providing a context, will still cause the entire DOM to be traversed. Same goes for selecting by element I think. Using placeholder classes here is definitely not the answer. What you are wanting to do is find all input elements with a particular attribute - and you're using the correct selector for that purpose.
好吧，您可以给表单一个 id，然后使用
$("#theForm input[placeholder]")这将减少选择器必须考虑的元素数量。Well, you could give your form an id and then use
$("#theForm input[placeholder]")which will cut down on how many elements the selector has to consider.它并不慢（你测试过还是只是推测？）。 但是如果可以的话请使用类。
It's not slow (have you tested or just speculating?). But use classes if it is.