jQuery Proven Performance, Tips & Tricks (튜닝, 팁, 트릭)

http://yubylab.tistory.com/entry/jQuery-jQuery-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94

http://addyosmani.com/jqprovenperformance/?utm_source=javascriptweekly&utm_medium=email
http://jsperf.com/browse jQuery 관련 테스트 리뷰

아래 이미지를 클릭하지 말고, 위의 URI 를 클릭하세요..



아래 내용을 보면, 1.4.4 보다는 1.4.2 가 낫다는 생각이 드네요. 물론 1.6.2 가 훨씬 나은 선택.
암튼, 최신의 jQuery 버전을 사용하는 것이 이득이라는데.. 최신 버전이 나온다고 바로 적용하는 것도 위험요소가 존재하죠.



id 와 form 요소가 접근성이 가장 뛰어난 이유가, Native DOM 때문이라는데..
반면, '.클래스명' 과 같이 클래스 접근이 속도 저조. DOM 구조를 몽땅 뒤지기 때문.
Pseudo 와 속성비교 등이 최악. $(':visible, :hidden, [속성=속성값]')




parent 와 child 의 오묘한 조합. 그러나 아래 코드들은 대부분 느리답니다. ^^.
$('.child',$parent).show() 와 $parent.find('.child').show() 는 동일한 내용이지만 후자가 훨씬 빠르답니다.
.child 가 아니라 #child 라면 결과는 또 다르게 나오겠죠.
아래 jQuery 내용들은 비슷비슷 하지만, 조금씩 결과가 다르게 나오는데, html 구조에 따라 동일할 수도 다를 수도.
var $parent = $('#parent') 라는 전제 하에 1) 2) 5) 6) 동일, 3) 4) 동일.
전제가 없다면..  1) 2) 는 동일, 5) 6) 동일.



와, 이거 명언입니다. jQuery 로 도배하지 말라는 건데요. jQuery 도 오리지널 자바스크립트(ol' JavaScript) 를 기반으로 하죠.



...{
  $(this).attr('id') 보다는 this.id 사용. 전자가 후자보다 80~95% 느리답니다. IE 계열에선 10배 정도 차이 나네요.
  http://jsperf.com/el-attr-id-vs-el-id/2
}


캐시를 적극 활용. 다들 알고는 있지만 실제로는 무심코 실수하는 거죠.
var parents = $('.parents'),
     children = $('.parents').find('.child'); 이렇게 하지 말공..
var parents = $('.parents'),
     children = parents.find('.child'); 요러코롬..
그런데, var $parents = $('.parents'), $children = $parents.find('.child'); 로 하는 것이 의미가 더 명확.


Chain 기법 아시죠..? $('...').funcA().funcB().funcC(); 이런거요.
var $a = $('...'); $a.funcA(); $a.funcB(); $a.funcC(); 이렇게 캐싱된 것과
서로 막상 막하 (캐시된 쪽이 도토리 키재기로 약간 빠름)
다만, $('...').funcA(); $('...').funcB(); $('...').funcC(); 와는 비교할 수 없을 정도로 빠르고, 코드도 적게 들어가공.


이벤트 위임(Delegation) 에서 Bubble Up 기능도 고민해야 하는데..
.bind() 와 .live() 가 용법과 개념에서 약간 상이.



jQuery 에는 query 라는 단어가 들어가지만, DB 는 아니므로 DB query 처럼 넣고 빼고 이런건 비용이 많이 발생한다.
.append() 는 한 두번 정도만 사용하고 많이 사용한다면 .detach() 를 사용하라.
$('#..').data(key,value) 대신에 $.data('#..',key,value) 가 훨씬 빠르당. 크으.. 글쿤요.



드디어 Loop 얘기가 나왔네요.
ol' JavaScript 의 Native for 나 while 이 $.each() 나 $.fn.each() 보다 퍼포먼스 측면에서 더 빠르겠지요.
(for 나 while 을 정상적으로 다루지 못한다면, 콜렉션 함수인 each() 보다 더 느릴 수는 있어요..)
Ben Alman 의 $.each2() 플러그인은 $.fn.each 보다 낫다는 군요. each2() 와 Native for, while 등과의 비교는 없네요.
개발자는 피곤해요.. 이게 나은지 저게 더 나은지 테스트 하느라구요. 누가 알아주기는 한데요.. 느리면 불평만 하징.. ㅋㅋ



$.data(...) 와 마찬가지지만, $.text($(...)) 가 $(...).text() 보다 훤씬 빠르네욤..


DRY 가 뭔가 했더니 Don't Repeat Yourself 라네요.. ㅋㅋ.


.Fine.