Nieefektywne ostrzeżenia o użyciu jQuery w środowisku PHPStorm IDE

100

Niedawno zaktualizowałem moją wersję PHPStorm IDE i teraz ostrzega mnie o nieefektywnym wykorzystaniu jQuery.

Na przykład:

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

Wyświetla to ostrzeżenie:

Sprawdza, czy selektory jQuery są używane w efektywny sposób. Sugeruje podzielenie selektorów podrzędnych, które są poprzedzone selektorem ID, i ostrzega o zduplikowanych selektorach, które mogą być buforowane.

Więc moje pytanie brzmi:

Dlaczego jest to nieefektywne i jaki jest skuteczny sposób wykonania powyższego selektora?

Zgaduję na:

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

Czy to dobra droga?

Scott
źródło

Odpowiedzi:

156

Miałem to samo pytanie dzisiaj i był w stanie znaleźć rozwiązanie dzięki Scott Kosman tutaj .

Zasadniczo odpowiedzią jest wybranie identyfikatorów indywidualnie, a następnie użycie .find(...)do wszystkiego poniżej. A więc biorąc przykład:

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

Zmiana na to sprawia, że ​​PhpStorm jest szczęśliwy i najwyraźniej może być ponad dwa razy szybszy :

$("#property").find("[data-role='content'] .container");
MikeSchinkel
źródło
1
Na mój gust $ ('[data-role = "content"] .container', '#property'); jest bardziej czytelny.
n3rd,
26
@ n3rd Zabawne, nie uważam tego podejścia za czytelne, ale każdemu tak mówią.
MikeSchinkel,
19

Uważam, że różnica między tymi dwiema metodami przy korzystaniu z najnowszych wersji jQuery i przeglądarek jest znikoma. Skonstruowałem test, który pokazuje, że teraz jest o 10% szybszy wybór łączonego selektora niż selekcja na id, a następnie znalazłem bardzo prosty przypadek:

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

W przypadku wyboru wielu dzieci z klasy na dowolnej głębokości polecenie „znajdź” wydaje się być szybsze:

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

Odbyła się dyskusja na ten temat na forach jQuery, ale ma już 3 lata: https://forum.jquery.com/topic/which-jquery-selection-is-efficient Jak wskazują tutaj, jeśli robisz dużo operacje na tym samym selektorze identyfikatora, największą poprawę wydajności można uzyskać, buforując element najwyższego poziomu. Z drugiej strony, jeśli robisz tylko kilka wyborów, nie będzie praktycznie żadnej różnicy w wydajności.

Dlatego uważam, że IntelliJ wyolbrzymia znaczenie tego stylu kodu.

Leonya
źródło
4
W pierwszym teście korzystasz z bezpośredniego wyboru zmarłego ">". Pierwszy test przeprowadziłem bez ">", a użycie "znajdź" jest szybsze. jsperf.com/jquery-find-vs-insel/12
beardedlinuxgeek
Najbardziej interesujące jest to, że najnowsze wersje Safari przetwarzają metodę bezpośrednią najszybciej o około 25%. Nie wiem, co zrobili, ale najwyraźniej wszystkie inne przeglądarki nie przyjęły.
Uxonith
14

Pierwsze pytanie brzmi: naciśnij Alt + Enter i wybierz pierwszą wskazówkę z listy, a następnie naciśnij Enter, a zobaczysz, jaki jest najbardziej efektywny sposób.

UnixAgain
źródło