Неэффективные предупреждения об использовании jQuery в PHPStorm IDE

100

Недавно я обновил свою версию PHPStorm IDE, и теперь она предупреждает меня о неэффективном использовании jQuery.

Например:

var property_single_location = $("#property [data-role='content'] .container");

Предлагает это предупреждение:

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

Итак, мой вопрос:

Почему это неэффективно и как эффективно использовать указанный выше селектор?

Я бы предположил:

var property_single_location = $("#property").find("[data-role='content']").find(".container");

Это правильный путь?

jquery jquery-selectors performance Скотт
источник

Ответы:

156

Сегодня у меня был такой же вопрос, и я смог найти решение благодаря Скотту Косману здесь .

В основном ответ состоит в том, чтобы выбрать идентификаторы индивидуально, а затем использовать их .find(...)для всего, что указано ниже. Итак, возьмем ваш пример:

$("#property [data-role='content'] .container");

Изменение его на это делает PhpStorm счастливым и, очевидно, может быть более чем в два раза быстрее :

$("#property").find("[data-role='content'] .container");
Майк Шинкель
источник
1
На мой вкус $ ('[data-role = "content"] .container', '#property'); читабельнее.
n3rd 07
26
@ n3rd Забавно, я не нахожу такой подход читабельным, но, как говорится, каждому свое.
MikeSchinkel 07
19

Я считаю, что разница между этими двумя методами при использовании последних версий jQuery и браузеров незначительна. Я построил тест, который показывает, что теперь на самом деле на 10% быстрее делать комбинированный селектор, а не выбирать по id, а затем находить для очень простого случая:

http://jsperf.com/jquery-find-vs-insel

При выборе нескольких дочерних элементов по классу на любой глубине «поиск» оказывается быстрее:

http://jsperf.com/jquery-find-vs-insel/7

Об этом говорилось на форумах jQuery, но ему уже 3 года: https://forum.jquery.com/topic/which-jquery-selection-is-efficient Как они здесь указывают, если вы делаете много операций с одним и тем же селектором идентификатора, наибольшее улучшение производительности достигается при кэшировании элемента верхнего уровня. С другой стороны, если вы делаете всего несколько вариантов выбора, разницы в производительности практически не будет.

Поэтому я считаю, что IntelliJ переоценивает важность этого стиля кода.

Леоня
источник
4
В вашем первом тесте вы используете прямой выбор ">". Я провел ваш первый тест без ">", и использование "find" выполняется быстрее. jsperf.com/jquery-find-vs-insel/12
beardedlinuxgeek
Что я считаю наиболее интересным, так это то, что последние версии Safari обрабатывают прямой метод быстрее всего примерно на 25%. Я не знаю, что они сделали, но, видимо, все остальные браузеры не прижились.
Uxonith
14

Первый вопрос - нажать Alt + Enter и выбрать первый совет в списке, затем нажать Enter, и вы увидите, что он считает наиболее эффективным.

UnixAgain
источник