Jquery Performance 향상Jquery Performance 향상

Posted at 2013.10.01 23:01 | Posted in 분류없음

이 문서에서는 Jquery Performance(성능) 향상을 위한 방법을 설명합니다.

Jquery Performance는 다방면에서 다루어질수 있지만 이 문서에서는 Selector에 중점을 두었습니다.


1. id vs tag vs class vs pseudo

Jquery에서 selector를 지정하는 방법은 여러가지가 있다. 하지만 selector를 지정하는 방식에 따라 성능차이는 분명하게 존재한다. 아래는 selector를 지정하는 여러가지 방식을 나열한 것이다.


1. $("#foo"); //jquery id

2. $("blockquote"); //jquery tag

3. $(".bar"); //jquery class

4. $(":hidden"); //jquery pseudo-selector


  위와 같이 여러가지 방식이 있을 수 있다. 결론적으로 속도는 브라우져마다 조금씩 차이가 있을 수 있겠지만 위 4가지 경우만을 봤을 땐 id로 셀렉터를 지정한 것이 월등히 빠르다. 반면 pseudo 는 가장 느리다. id 셀렉터가 가장 빠른이유는 내부적으로 브라우저 내장 method인 getElementById()를 사용하기 때문이다. 참고로 클래스 셀렉터는 내장 method인 getElementsByClassName()으로 호출되는데 이것은 익스플로러 5~8에선 지원되지 않는다. 따라서 해당 버전에서 이 셀렉터를 사용하면 느려질 수 밖에 없다. 이유는 내장 method가 없어서 jquery에서 직접 모든 DOM tree를 순회하면서 해당 클래스를 찾기 때문이다. Pseudo 셀렉터는 브라우저에 내장 method가 없기 때문에 무조건 jquery에서 직접 찾아야 하기 때문에 가장 느리다.


결론적으로 성능순으로 따지면 1 > 2,3 > 4 순이 되겠다. 



2. Selector는 Simple 해야한다.

예를들어 아래의 코드에서 target을 selector로 지정해서 css를 변경하려고 한다.


 <div id="container">

    <ul>

       <li>1</li>

       <li class="target">2</li>

    </ul>

  </div>


마찬가지로 Selector를 지정하는 방식에는 여러가지가 있을 수 있다.


1. $('div#container ul li.target').css('border','1px');

2. $('#container .target').css('border', '1px');

3. $('li.target').css('border', '1px');

4. $('.target').css('border', '1px');

5. $('div#container').find('.target').css('border','1px');


정말 많다. 개발자는 무슨수를 써서라도 원하는 element를 select할 수 있는 것이다. 이러한 장점이 때론 코드자체를 지저분하게 만들고 심지어 속도를 느리게까지 한다. 여기서 우린 class가 target인 것을 select하길 원했다. 그럼 바로 target클래스를 잡아주면 된다. 굳이 부모 엘리먼트부터 타고 내려올 필요가 없다는 뜻이다. selector는 복잡할수록 느려진다.


실제로 아래와 같은 performance 그래프가 있다. 여기서 보라색이 4번 selector이다. 그래프는 operation per second로 값이 클수록 성능이 좋음을 나타낸다. 나머지는 성능이 비슷비슷한 것을 알 수 있다. (출처 : http://jsperf.com/browse)




3. 쓸데없는 Selector 사용은 낭비다.

jquery Selector를 사용할 필요가 없는 곳에서는 사용하지 않는게 최선이다. 예를 들면 아래와 같은 코드를 보자.


$('.searchBtn').bind('click', function() {

   alert( $(this).attr('id') );

}

위와 같은 이벤트 함수가 있고, 여기서 해당하는 id를 찍으려고 selector를 잡은 모습이다. 하지만 이런 경우 굳이 Selector를 잡을 필요가 없다. this객체에서 바로 id로 접근이 가능하기 때문이다. 아래를 보자.


$('.searchBtn').bind('click', function() { 

  alert( this.id );

}


위와 같이 사용하면 더 간단하고 빠르다.


4. JQuery $('#ID') selector vs $(document.getElementById('ID')


결론적으로 브라우저 내장 메소드인 getElementById를 사용하는 것이 월등히 빠르다.


jquery는 개발자가 개발을 좀 더 쉽고 간편하게 할 수 있도록 여러 기능을 제공하지만 속도면에서 브라우저의 내장 메소드를 따라갈 수는 없다. id로 셀렉터하는 방식을 비교함으로써 도달하는 결론은 성능 향상을 위해서라면 혹은 꼭 필요한 경우가 아니라면 jquery를 사용하지 않는 것이 도움이 된다는 것이다.




Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

티스토리 툴바