Производительность jQuery - выбирайте по data-attr или по классу?

Question

Что быстрее и почему? Выбор div (для нужд плагина) с помощью $('div[data-something]') или $('div.something')? Я склоняюсь к первому, так как оно «чище».

На основании этого ТАКОГО вопроса Я знаю, что не должен использовать оба. Однако я не выяснил, есть ли разница между ними.

Answer 1

По крайней мере, в Chrome 16 нет никакой разницы . Однако, если вы сделаете селектор класса менее конкретным (например, $(".test")), он превзойдет другие методы:

Это было несколько неожиданно, потому что, как упоминает ShankarSangoli, я думал, что селектор класса div.test будет быстрее.

Answer 2

Это будет зависеть от браузера.Почти все браузеры теперь поддерживают querySelectorAll, и jQuery будет использовать его, когда сможет.querySelectorAll может использоваться с селекторами присутствия атрибутов, поэтому, если он есть, jQuery не должен выполнять работу, он может перегрузить его на движок.

Для старых браузеров без querySelectorAll jQuery, очевидно, будетприходится выполнять больше работы, но даже в IE8 она есть.

Как и в большинстве этих случаев, ваш лучший выбор:

1. Не беспокойтесь об этом, пока /если вы не видите проблему, и

2. Если вы видите проблему, профилируйте ее в браузерах, которые вы собираетесь поддерживать, а затем примите обоснованное решение.

Answer 3

Выбор по классу всегда быстрее, чем селектор атрибута, потому что jQuery сначала пытается использовать собственный getElementByCalssName, если поддерживается браузерами. Если нет, он использует querySelector, который использует селекторы css для поиска элементов на странице.