Недавно я обновил мою версию PHPStorm IDE, и теперь она предупреждает меня о неэффективном использовании jQuery.
Например:
var property_single_location = $("#property [data-role='content'] .container");
Подсказывает это предупреждение:
Проверяет, что селектора jQuery используются эффективным образом. Это предполагает для разделения селекторов-потомков, которые предваряются с помощью селектора идентификаторов и предупреждает о дублированных селекторах, которые могут быть кэшированы.
Итак, мой вопрос:
Почему это неэффективно и каков эффективный способ сделать этот селектор выше?
Я бы предположил:
var property_single_location = $("#property").find("[data-role='content']").find(".container");
Правильно ли это?
У меня был такой же вопрос сегодня, и я смог найти решение благодаря Скотт Косман здесь.
В основном ответ заключается в том, чтобы выбирать идентификаторы отдельно, а затем использовать .find(...) для чего-либо ниже. Итак, возьмем ваш пример:
$("#property [data-role='content'] .container");
Изменение этого параметра делает PhpStorm счастливым и может быть более чем в два раза быстрее:
$("#property").find("[data-role='content'] .container");
Я считаю, что разница между двумя методами при использовании последних версий 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 Как они отмечают здесь, если вы выполняете много операций с одним и тем же селектором id, наибольшее улучшение производительности достигается путем кэширования элемента верхнего уровня. С другой стороны, если вы выполняете только несколько вариантов, практически не будет разницы в производительности.
Поэтому я считаю, что IntelliJ преувеличивает важность этого стиля кода.
Первый вопрос - нажать Alt + Enter и выбрать первый совет в списке, а затем нажать Enter, вы увидите, что он считает самым эффективным способом.