최근에 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를 누르는 것입니다. 가장 효율적인 방법이 무엇인지 확인할 수 있습니다.
