PHPSTorm IDE의 비효율적인 jQuery 사용 주의

PHPSTorm IDE의 비효율적인 jQuery 사용 주의

최근에 PHPSTorm IDE 버전을 업그레이드했는데 jQuery의 비효율적인 사용에 대해 경고합니다.

예를 들어,

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

다음 경고 메시지를 표시합니다.

jQuery Selector가 효율적으로 사용되는지 확인합니다.ID 선택기로 접두사가 붙은 하위 선택기를 분할할 것을 제안하고 캐시할 수 있는 중복 선택기에 대해 경고합니다.

그래서 제 질문은:

이것은 왜 비효율적이며 위의 셀렉터를 효율적으로 수행하는 방법은 무엇입니까?

내 생각엔:

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

이게 바른 길이야?

오늘도 같은 질문을 받고 해결책을 찾을 수 있었던 것은 이곳 스캇 코스만 덕분입니다.

기본적으로 답은 ID를 개별적으로 선택한 후 사용하는 것입니다..find(...)그 이하의 것에 대해서는예를 들어 말씀드리겠습니다.

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

PphStorm을 이렇게 변경하면 행복해지고 2배 이상 빨라질 수 있습니다.

$("#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