2013-01-10 2 views
2

데스크탑 html5 응용 프로그램에서는 모바일 html5 응용 프로그램을 작성하고 있지만 jquery를 항상 사용해야하는지 궁금합니다.jquery를 사용하거나 jquery를 사용하지 않는 것이 더 빠릅니까?

우선 선택자에 대해 궁금합니다. jsfiddle에 대한 실험을 수행하고 $ ('item')과 document.getElementById ('item') 사이의 속도 차이를 테스트했습니다. 통계적으로 나는 $ ('item')이 document.getElementById보다 느리다는 결론을 내 렸습니다. 이런 이유로 나는 그러나 나는이 질문에 여기 읽어 완전히 jQuery를하지 않고 내 코드를 작성 전환하려는 : 그것은 jQuery의 CSTE 연구진를 사용하여 바인딩에 올 때() 메소드는 매우 효율적입니다

What's the difference between `on` and `live` or `bind`?

있다. jQuery의 .on() 메서드는 addEventListener()보다 빠릅니까? 이 div의 배수를 계속 추가하고 제거하는 경우 :

<div class="item"></div> 

정상적인 자바 스크립트에서 클래스 아이템으로 새 div를 추가 할 때마다 새 div를 리바 인딩해야하지만, .on()을 사용하면 자동으로 수행됩니다. 이 모든 것이 더 효율적입니까?

+1

왜 성능 만 고려합니까? – delnan

+9

이것은 ** 조숙 한 최적화의 정말 좋은 예입니다. ** 모바일 장치의 jQuery가 반드시 문제가되는 것은 아닙니다. 실제로 전체 모바일 지향 프레임 워크가 그 위에 구축됩니다. – Pointy

+3

테스트를 실행하고 직접 찾으십시오. jsperf는 훌륭한 리소스입니다. – epascarello

답변

3

는 jQuery의 CSTE 연구진() 메소드를 빠르게하여 addEventListener 이상()인가?

.on()은 을 사용하여 .event.add()으로 정의됩니다. 한편으로 이러한 함수는 인수 검사 및 관리 오버 헤드로 인해 addEventListener에 대한 직접 호출보다 느립니다. 반면에 .event.add()은 가능할 때마다 addEventListener에 대한 호출을 피합니다.

예를 들어 (항목 추가, 이벤트 처리기 바인딩, 항목 제거), .event.add()의 비용이 이점보다 커서 jQuery가 더 느리게 수행 될 것으로 예상됩니다. 그러나 보다 측정하는 것이 더 좋은 경우는입니다.

또한 jQuery는 매우 휴대 성이 높다는 것을 명심하십시오. 예를 들어, a workaround for a Firefox event dispatch bug이 포함되어 있습니다. 이러한 브라우저 버그를 직접 테스트하고 우회하는 것은 개발 시간의 가치가 없을 수도 있습니다.

1

jQuery와 네이티브뿐만 아니라 다른 라이브러리 사용의 차이점을 보여주는 여러 가지 테스트가 이미 있습니다. 기본 개념은 추가 오버 헤드를 발생시키기 때문에 래퍼가 항상 네이티브 함수보다 느릴 수 있다는 것입니다. 다음은 몇 가지 예는 다음과 같습니다

http://jsperf.com/node-create-native-jquery-yui/3

관련 문제