Производительность селектора

Question

Я пытаюсь выбрать элемент, который соответствует определенным критериям. Прямо сейчас я делаю это так:

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

что медленно, как ад (1400мс в Opera, ~ 120мс в Chrome)

До этого у меня было:

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

, который занимал как 5-6 секунд в Опере.

(функция с этим кодом вызывается примерно 250-400 раз на странице)

В любом случае, это все еще медленно, потому что я делаю много нажатий, а общая загрузка в Opera может по-прежнему превышать 2 секунды, в зависимости от содержимого страницы.

Как вы думаете, я могу немного улучшить запрос?

ps: "attr" имеет значение name (атрибут name), я просто использовал его как переменную, чтобы проверить, быстрее ли другие атрибуты

Answer 1

Если у вас есть возможность изменить саму разметку на сервере, добавьте общий класс для каждого из этих элементов.Затем вы можете просто выбрать по классу, что намного быстрее.

Кроме того, если ваша страница большая, но эти входные данные находятся только в одной части экрана, используйте общий родительский элемент, чтобы сузить ее.$("#parent <otherselector>")

Answer 2

Попробуйте использовать селектор тегов. Таким образом, браузер может перенести часть усилий на getElementsByTagName вместо фильтрации по ВСЕМ элементам. Я предполагаю input на основе квалификатора type=hidden.

$(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);