[data = "what"] против a. what против a # what производительность селектора

Question

просто интересно, какова производительность селектора для псевдопроизводительности [data = "what"], если у кого-то есть хорошая статья / тест для этого или какого-либо личного опыта?

По сути, я засыпал свой HTML с помощью data-eid, data-mid, data-sid с такими элементами HTML5, как:

<section data-mid="1">
    <article data-eid="1">
        <a data-sid="1"></a>
        <a data-sid="2"></a>
        <a data-sid="3"></a>
    </article>
    <article data-eid="2">
        <a data-sid="4"></a>
        <a data-sid="5"></a>
        <a data-sid="6"></a>
    </article>
</section>
<section data-mid="2">
    <article data-eid="3">
        <a data-sid="7"></a>
        <a data-sid="8"></a>
        <a data-sid="9"></a>
    </article>
    <article data-eid="4">
        <a data-sid="10"></a>
        <a data-sid="11"></a>
        <a data-sid="12"></a>
    </article>
</section>

Очень хотелось использовать его в jQuery для выбора конкретных m e и s вещей на моей странице. Я знаю, что m - это раздел, e - это статья, а s - это якорь.

Я бы обычно выбирал в jQuery что-то вроде $('.m[mid="1"]'), но намного ли это быстрее, чем: $('section[mid="1"]') ... Полагаю, нет?

Я просто не хочу, чтобы пользователь загружал дополнительный класс = "m" в моем коде. Я знаю, что в настоящее время я связываю свой интерфейс с моим кодом JS-end, заставляя элементы определенного типа, где class = "m" отделит его от всего, что будет в будущем.

Что вы думаете?

Answer 1

Когда я пишу HTML, предназначенный для передачи чего-либо ненавязчивому JavaScript, который будет управлять поведением, я делаю это:

<div class='some-behavior' data-param-for-behavior='whatever' data-another-param='12'>

Затем код может применяться сам на основе имени класса, которое (в современных браузерах) довольно быстро, и получать параметры с помощью ".data ()".

Выборка по имени класса:

var elementsToControl = $('.some-behavior');

в современных браузерах способ быстрее, чем

var elementsToControl = $('[data-param-for-behavior]');

изменить & mdash; wow mind blown - метод by-attribute с именем тега на быстрее , чем на-класс в Chrome. Я тоже попробую подкласс с именем тега ... изменить еще раз Нет. Мальчик, иногда мне просто интересно: -)

Answer 2

Название вашего вопроса не соответствует тексту вопроса.Если вы конкретно спрашиваете, какие из a[data="what"], a.what и a#what, то вы перечислили их в порядке возрастания производительности.Вы также должны иметь возможность упростить a#what до #what, поскольку идентификаторы в любом случае применяются только к одному элементу.

Answer 3

Вы должны только использовать селектор класса в вашем примере, вот почему:

Селектор

[attr] работает медленно и не обратно совместим (ну, пользовательские атрибуты тоже не обратно совместимы) (@Pointy, [attr] можно сделать быстрее, чем ., используя именованные сегменты, но это не так пока что дело обстоит с большинством браузеров)

# Селектор работает очень быстро, но идентификаторы должны быть уникальными, элемент может иметь только один идентификатор, и все идентификаторы в документе автоматически становятся свойствами объекта window в javascript (во всех браузерах).

. селектор быстрый, обратно совместимый и не имеет ограничений, описанных выше.

Answer 4

Это интересный вопрос, но я думаю, что вы оптимизируете то, что не нужно оптимизировать.Я бы проверил две вещи:

• Сколько существует этих элементов mid / sid / eid?Меньше 10 000?ОК.
• Включен ли на вашем веб-сервере сжатие gzip?Да?ОК.

Вы можете взглянуть на свою страницу с помощью встроенных в Chrome или Firefox средств отладки, чтобы понять, сколько времени на самом деле требуется для загрузки и запуска.

Не пытаться быть скупым или снисходительным, а просто говорить из опыта.Также другие уже разместили хорошие ссылки!:)

Удачи!

Answer 5

В этом вопросе стека они также говорят о производительности селекторов JQuery, в которой один ответ конкретно говорит об идентификаторах и что в целом они быстрее, чем что-либо еще ...