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?
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.
źródło
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.
źródło