JQuery data- * vs class selector - производительность?

Я видел много примеров (включая любимую загрузку Twitter), где различные API используют $("[data-something]") вместо выбора по классу $(".something")

Пустота, я попытался найти информацию о производительности между этими двумя разными селекторами. Я был удивлен, что многие тесты производительности показали, что эти селектора одинаково быстро работают в большинстве современных браузеров, поэтому я решил сделать мой собственный тест

Я действительно запутался прямо сейчас, и я не знаю, был ли это мой тест неправильным (каким-то образом?) или это другие тесты, которые я проверял раньше?

Может ли кто-нибудь предоставить дополнительную информацию, если я делаю что-то неправильно во время тестирования или эти тесты корректны, а селектор data-attribute на самом деле намного медленнее обычного класса селектор?

Спасибо

Ответы

Ответ 1

При использовании селекторов атрибутов производительность может варьироваться в зависимости от поддержки querySelector в вашем браузере. jQuery вернется во встроенную библиотеку (SizzleJS), которая намного медленнее.

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

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

Атрибуты данных точно такие: data. Иногда вам нужно хранить дополнительные данные в своих элементах. Например:

<table>
    <tr data-id="4" data-category="1">
        <td>Name</td>
        <td>Email</td>
    </tr>
</table>

Обратите внимание, что я не использую обычный атрибут "id" по той же причине.