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

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

---

최근에 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");

이것이 올바른 방법입니까?

---

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

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

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

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

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

---

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

---

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

참고 URL : https://stackoverflow.com/questions/12674591/inefficient-jquery-usage-warnings-in-phpstorm-ide