PHPStorm IDE의 비효율적 인 jQuery 사용 경고

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

오늘도 같은 질문이 있었고 여기 Scott Kosman 덕분에 해결책을 찾을 수있었습니다 .

기본적으로 답은 ID를 개별적으로 선택한 다음 .find(...)아래 항목에 사용 하는 것입니다. 따라서 귀하의 예를 들어 :

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

이를 이렇게 변경하면 PhpStorm이 행복 해지고 분명히 두 배 이상 빨라질 수 있습니다 .

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

— MikeSchinkel
소스

1

내 취향대로 $ ( '[data-role = "content"] .container', '#property'); 더 읽기 쉽습니다.

— n3rd

26

@ n3rd 웃긴, 나는 그 접근 방식을 전혀 읽을 수 없다고 생각하지만 각자 자신에게 말합니다.

— MikeSchinkel 2013-06-07

19

최신 버전의 jQuery와 브라우저를 사용할 때 두 가지 방법의 차이는 무시할 만하다고 생각합니다. 나는 id에 대한 선택보다 결합 된 선택기를 수행하는 것이 실제로 10 % 더 빠르다는 것을 보여주는 테스트를 구성한 다음 매우 간단한 경우를 찾습니다.

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가이 코드 스타일의 중요성을 과장하고 있다고 생각합니다.

— Leonya
소스

4

첫 번째 테스트에서 직접 사망 선택 ">"을 사용하고 있습니다. ">"없이 첫 번째 테스트를 실행했으며 "찾기"를 사용하는 것이 더 빠릅니다. jsperf.com/jquery-find-vs-insel/12

— beardedlinuxgeek

가장 흥미로운 점은 최신 버전의 Safari가 직접 방법을 약 25 %까지 가장 빠르게 처리한다는 것입니다. 나는 그들이 무엇을했는지 모르지만 분명히 다른 모든 브라우저는 포착하지 못했습니다.

— Uxonith 2015 년

14

첫 번째 질문은 Alt + Enter를 누르고 목록에서 첫 번째 팁을 선택한 다음 Enter를 누르는 것입니다. 가장 효율적인 방법이 무엇인지 확인할 수 있습니다.

— UnixAgain
소스