选择器的性能

Question

我正在尝试选择满足特定条件的元素。现在我是这样做的：

$('[' + attr + '="' + name + '"]', el).filter('[type!="hidden"]').get(idx);

它慢得像地狱(在Opera中1400ms，在Chrome中约120ms)

在此之前，我有：

$('[' + attr + '="' + name + '"][type!="hidden"]', el).get(idx);

在歌剧里大概需要5-6秒。

(包含此代码的函数在一个页面中被调用250-400次)

无论如何，它仍然很慢，因为我正在做很多选择，而Opera中的总负载仍然可以超过2秒，这取决于页面内容。

你觉得我能不能稍微改进一下这个查询？

ps："attr“有一个名称的值( name属性)，我只是把它作为一个变量来测试其他属性是否更快

Answer 1

尝试使用标签选择器。通过这种方式，浏览器可以将部分工作卸载到getElementsByTagName，而不是过滤所有元素。我猜是基于type=hidden限定符的input。

$(el).find('input[' + attr + '="' + name + '"]').filter('[type!="hidden"]').get(idx);

//Don't actually call this too often unless the DOM is changing.  Cache it and then call the get function.
var resultSet = $(el.getElementsByTagName("input"))
    .add(el.getElementsByTagName("select"))
    .add(el.getElementsByTagName("textarea"))
    .filter(function() {
        //You may need to modify this section.  select and textarea don't have a type attribute.
        return this.getAttribute(attr) == name && this.getAttribute("type") == "hidden";
    });

//Call later
resultSet.get(idx);

Answer 2

如果您能够在后端修改标记本身，请为每个元素添加一个公共类。然后，您可以简单地按类进行选择，这要快得多。

此外，如果您的页面很大，但这些输入仅位于屏幕的一部分，请使用公共父级来缩小范围。$("#parent <otherselector>")