[ 펌 ] jQuery 성능 최적화

원문 : htp://twittexperts.com/link/91711320501

출처 : http://amoogi.azurewebsites.net/2951

jQuery에 관해 쓰는것은 오랜만이것 같다. 많은 다른 최적화 기사들을 쓰곤했지만, jQuery에 관해서는 그렇지 않았다. 하지만 애플리케이션이나 디자인쪽에서 아주 많이 사용되고 있기 때문에, 몇가지 jQuery관련 팁을 이야기 할 것이다. 이 기사는 최적화 팁을 공유시키고, 미래 애플리케이션에 활용할 수 있게 도움을 줄 것이다. 이 기사의 8가지 jQuery 최적화 팁과 트릭들은  jQuery 코딩에 도움을 줄 것이다.

1. 프로파일링(Profiling)

최적화에서 가장 중요한 것은 프로파일링이다. 우리는 firebug(firefox 디버깅툴)를 이용해서 쉽게 프로파일링 할 수 있다. 모든 개발자들과 심지어 디자이너들까지도 이런 일을 도와줄 수 있는 firebug에 대해 알고 있어야 한다. 프로파일링은 각각의 함수들이 몇번이나, 얼마나 오랫동안 실행되는지를 보여준다. 프로파일링으로 jQuery 함수들중 어떤 함수가 병목현상을 일으키는지 알 수 있다.

2. 벤치마킹(Benchmarking)

최적화에서 또 한가지 중요한 것은 벤치마킹이다. 프로그래밍에서 코딩을 할때 같은 결과를 얻기 위해 다른 방법들을 사용하는 것은 아주 일반적이다. 어떤 것이 좋은 결과를 주는지 알기 위해서는, 같은 결과를 얻는 여러 방법중에 다른 것보다 성능이 더 좋은것을 가리는 벤치마킹이 필수이다. 벤치마킹은 어떤 자바스크립트 프레임웍들에서 선택한 방법이 더 빠르게 수행되는지  볼 수 있는 유일한 방법이다. 벤치마킹은 두개 이상의 방법의 성능이나 스크립트의 효과를 측정하기 위해 정말 필요하다.

3. Selector 구체화(Specific Selector)

jQuery 1.3 이전에서는 selector를 구체화하는 것이 jQuery selector의 속도를 최적화하 하기 위해 필요하다. 구체화된 selector는 더욱 빠른 결과를 보여 줄 것이다.

jQuery(‘#someid”).attr(‘value’);

아이디는 항상 태그나 클래스에 비해 빠르지만, 클래스는 최악이다. 하지만 클래스를 사용해도 selector를 구체화시켜 성능을 향상 시킬 수 있다. 아래와 같이 호출하는 대신에

jQuery(‘.classes’).html();

다음과 같이 클래스의 정확한 위치를 말해줌으로써 성능을 향상 시킬 수 있다.

jQuery(‘div ul li.classes’).html();

jQuery안에서는 구체화될수록 selector의 속도가 향상된다. 그러나 이것은 jQuery 1.3 이전 버전에서 그렇다. ‘Sizzling’ Selector 엔진이 소개된 후로 이것은 더이상 유효하지 않다. 우리가 selector 테스트를 해본 결과 selector의 속도는 이전보다 빨라졌다. 이것은 1.3 이후 버전도 클래스를 구체하 하는 것이 좋다는 것은 별 차이가 없다는 뜻이다. 다만 다음과 같이 이상한 selector를 사용하지 않든다면 말이다.

jQuery(‘#id .class div’).html();

다음과 같이 하는 것이 더 빠를 것이다.

jQuery(‘ .class’).html();

아이디를 사용하지 않고, 클래스와 속성조합을 사용하면, selector의 성능은 나빠질 것이다. selector를 구체화하는 것의 요점은 selector의 성능을 감소시키게 하는 이상한 선언을 하지 않는 것이다.

4. 불필요한 Selector 피하기(Avoid Unnecessary Selector)

어떤 프로그래밍 코드에서도, 불필요한 코드를 제거하는 것은 최적화의 일반적인 방법이다. 불필요한 selector를 사용하는 것은 비용이 많이든다. 다음을 보자.

jQuery(‘.class’).each(function() {
 
  jQuery(this).html();
 
  jQuery(this).find(‘div’).each(function() {
 
    // etc
 
  });
 
});

위와 같이 많은 selector가 필요할때 selector를 반복해서 사용하기 보다는 하나를 사용하는 것이 좋다.

jQuery(‘.class’).each(function() {
 
  var obj = jQuery(this);
 
  obj.html();
 
  obj.find(‘div’).each(function() {
 
   // etc
 
  });
 
});

이와 같은 것을 많은 plugin에서 볼 수 있다. 많은 plugin들이 plugin의 성능을 조금씩 저하시키는 불필요한 selector를 포함 하고 있다.

5. 불필요한 스타일링 피하기(Avoid Unnecessary Styling)

이것은 많은 jQuery개발자가 저지르는 일반적인 실수중 하나다.  jQuery는 스타일링 메소드를 통해 스타일을 조작하는 능력을 제공한다. 이것이 많은 잇점을 주기도 하지만, 유지보수를 어렵게 하고 스크립트의 크기를 늘린다. 더욱이 몇몇 selector들은 스타일링을 위해서만 사용되는데, 이것은 매우 바람직하지 않다. 더욱 나쁜것은 jQuery로 만들어진 스타일은 캐싱에 도움이 되지 않은 인라인 스타일 이라는 것이다. 외부 스타일시트에 스타일을 지정하고, 태그에 클래스를 주는 것을 권장한다.  아래와 같이 jQuery 스타일링을 사용하는것 대신에 말이다.

jQuery(‘div’).each(function() {
 
  var obj = jQuery(this);
 
  obj.css({‘background-color’ : ‘yellow’, ‘font-weight’ : ‘bolder’, ‘color’ : ‘#000’, ‘font-size’ : ’15px’});
 
});

jQuery를 통해 스타일링이 적용되는 곳에 클래스를 추가하거나, HTML에 클래스를 추가하는 것이 훨씬 좋다.

jQuery(‘div’).each(function() {
 
  var obj = jQuery(this);
 
  obj.addClass(“mystyling”);
 
});

이 방법은 스크립트에서 많은 추가 코드를 제거해 준다. 꼭 jQuery를 통해서 스타일링을 조작할 필요가 없는한, 스타일시트에 스타일링을 맡기는게 좋다.

6. Selector 최적화(Optimize Selector)

selector를 구체화시키는 것 이외에도, selctor를 최적화 시킬수 있다. selector를 최적화시키는 방법은 간단한다. 네이티브 자바스크립트는 아이디와 태그를 가져오기 위해 두개의 메소드를 제공한다.(getElementById, getElementByTagName) 
이것은 sleector를 사용해 태그와 아이디를 가져오는 것보다 항상 빠르다. 클래스와 속성 선택을 위해 어떤 방법을 사용한다고 하더라도 내장된 네이티브 자바스크립트가 항상 빠를 것이다. 그래도 클래스와 속성 selector는 ‘sizzling’ selector 엔진이 소개된 후 극적인 성능향상이 이루어 졌다. 그러나 많은 경우에서 속도를 느리게 하는 속성 selector의 갯수를 감소시키는 것이 권장된다. 최대한 간단하게 selector를 만들기 위해서는 태그와 아이디 selector를 사용하는 것이 좋지만 속성일 경우에는 그렇지 않을 수 도 있다.

jQuery(‘div’)
 
jQuery(‘#id’)
 
jQuery(‘.classes’)
 
jQuery(‘p:last’)

아래같은 selector는 좋은 결과를 주지 않을 수도 있지만, 위와 같은 경우 좋은 selector로 생각되어진다.

jQuery(‘body div div’)
 
jQuery(‘div#id’)
 
jQuery(‘#id div.classes’)
 
jQuery(‘.classes p:last’)

jQuery를 새로운 언어가 아니라 자바스크립트이 도우미(helper)로 취급하는게 중요하다.

7. DOM 처리 피하기(Avoid DOM Manipulation)

프레임웍으로서 jQuery를 사용할때, 오히려 더 어렵게 만드는 것은 바보같은 일이다. 예를 들어 jQuery를 이용해서 DOM스타일로 테이블을 만들어 보자~

var table = $(‘<table></table>’);
 
for (var i = 0; i < 6; i++) {
 
  var tr = $(‘<tr></tr>’);
 
  for (var j = 0; j < 7; j++) {
 
    tr.append(‘<td></td>’);
 
  }
 
}
 
table.append($tr);
 
}

매번 append()를 호출할 때마다 추가되는 작업을 제외하고라도, 각각의 단계에서 비용이 많이 드는 DOM 생성을 하고, jQuery에게 각각의 라인 쿼리를 맡겨두는 것이 정말로 도움이 되는지 알아야 한다. 
다음과 같이 테이블을 최적화 할 수 있다.

var table = ‘<table>’
 
for (var i = 0; i < 6; i++) {
 
  var tr = ‘<tr>’;
 
  for (var j = 0; j < 7; j++) {
 
    tr += ‘<td></td>’;
 
  }
 
  tr += ‘</tr>’;
 
  table += tr;
 
}
 
table += ‘</table>’;
 
var table = $(table);

정적인 테이블인 경우, 단 한줄이면 된다.

var table = $(‘<table><tr><td.<td>…</tr><tr>…</tr>…</table>’);

정말 테이블을 사용해야 한다면 HTML에 만들어라. 모든것을 jQuery를 이용해 만들 필요는 없다. jQuery를 사용하는 것은 비용이 많이 드는 행위이기 때문에, 정말 필요할 경우에만 사용해라 (스타일링과 함께 사용하라.)

8. 자바스크립트와 jQuery 사이에서 균형을 맞추어라(Balance between JavaScript and jQuery)

jQuery는 어떠한 프론트-앤드 작업에서도 빠르다. 그러나 어떤 동작에서는자바스크립트를 사용하는 것보다 더 많은 시간이 걸릴 수 있다. 예를 들면

css: function( key, value ) {
 
  if ( (key == ‘width’ || key == ‘height’ ) && parseFloat(value) < 0 )
 
    value = undefined;
 
  return this.attr( key, value, “curCSS”);
 
}  
 
 

위는 우리가 잘 알고 있는 key와 value를 사용하는 jQuery안에 있는 CSS 메소드 이다.

jQuery(‘#id’).css(‘display’, ‘block’);

위와 같이 jQuery가 단순한 동작에도 발생시키는 오버헤드를 볼 수 있다, 자바스크립트로 똑같은 결과를 얻을 수 있다.

document.getElementById(‘id’).style.display = ‘block’;

show(), hide(), hasClass() 등등과 같은 다른 메소드들도 복잡성이나 효율성 사이에서 균형을 맞추어 사용해야 한다. 따라서 우리는 jQuery 동작에 대한 비용을 이해해고, 자바스크립트와 균형을 맞추어 사용해야 한다. jQuery는 일반 공공을 위해 만들어 졌고, 모든 요구사항들 충족시키기 위하여 계속 보강되는 일반 공공의 프레임웍으로 만들어 지고 있다. 따라서 만약 당신이 정말로 최적화를 원한다면, jQuery와 자바스크립트를 적절하게 잘 사용하는 것을 고려해야 한다.

요약

jQuery는 모든 개발작업에 편리함을 주는 휼륭한 프레임웍이다. 복잡한 작업이 jQuery로 인해 간단하게 될 수 있다. 그러나 불필요한 jQuery 코드 제거의 중요성을 안다고 한다면, 더욱 효과적이고 최적화된 jQuery 스크립트를 만드는데 도움이 될 것이다.