jQuery 사용 속도를 높이는 6가지 방법

 

jQuery는 이제 프로젝트에서는 빠질 수 없는 기본 요소 중 하나로 자리매김을 했습니다. 

아마 그 이유는 쉬운 사용방법과 높은 활용성 때문일거라 생각합니다. 하지만 같은 jQuery 코드도 어떻게 

만들어져 있는가에 따라서 속도차이가 나게 되는데요. 

우연히 보게 된 jQuery 속도를 줄일 수 있는 6가지라는 글이 있어서 정리해 보았습니다. 

 

1. 구체적인 셀렉터를 사용합니다.

 jQuery로 특정 요소를 DOM에서 검색할 경우, jQuery는 DOM 전체 구조에서 요소를 찾기 때문에 선택자(Selector)가 구체적일수록 속도에 좋으며 Class보다 ID가 단일 선택자이기에 속도가 더 빠릅니다.

- bad -
$(".item");

 

- good -
$("#item")          // class 보다는 ID를 사용할 것
$("p.first .item")  // 구체적인 위치의 셀렉터를 사용할 것

 

2. 항상 this를 사용합니다.

특정 기능을 사용하기 위한 선택자를 사용하는 경우  $(this)를 사용하여 함수 내에서 조작할 수 있습니다.  $(this)를 사용하지 않으면 동일한 요소를 찾기 위해 jQuery는 DOM에서 선택자를 찾는 과정을 두 번 실행하게 됩니다.

- bad -
$("#item").click(function() {
    $("#item").addClass('clicked');
});

 

- good -
$("#item").click(function() {
    $(this).addClass('clicked');
});

 

3. 같은 기능이 중복될 경우 다중 셀렉터를 사용합니다.

같은 기능이 복수의 요소에서 발생하는 경우 그룹화로 선택을 하여 jQuery가 의미 없는 DOM의 탐색을 막아 성능을 향상합니다.

// bad
$("p#one").fadeIn();
$("p#two").fadeIn();
$("p#three").fadeIn();

 

//good
$("p#one, p#two, p#three").fadeIn();

 

4. 다중 속성과 값 핸들링 시 사용방법

jQuery에서 같은 속성에 복수의 속성 값 대신에 하나의 속성 값을 한 번에 처리할 경 우 작업한 코드에서 jQuery 객체의 양을 감소시키는 것을 포함하여 몇몇 특성은 속도를 향상시킵니다.

// bad
$("img#one").attr('src', 'http://mysite.com/images/image.jpg');
$("img#one").attr('alt', 'My Image');

 

// good
$("img#one").attr({
    'src': 'http://mysite.com/images/image.jpg',
    'alt': 'My Image'
});

 

5. Class 또는 ID로 스타일을 추가합니다.

요소에 여러 스타일의 변경을 추가하려면 Class나 ID를 활용하여 CSS에서 스타일을 지정한 후 적용하는 것이 좋습니다. 

// bad
$("p").css({
    'background':'#dd0000',
    'color': '#fff',
    'padding': '5px 8px'
});

 

// good
.faster {
    background:#dd0000;    
    color:#fff;    
    padding:5px 8px;
}

 

// good
$("p").addClass("faster");

 

6. 체이닝 기법을 사용합니다.

특정 요소를 선택하고 동일한 요소를 찾기 위해 DOM을 여러 번 탐색할 필요 없이 체이닝(chaining) 기법을 통해(END 사용) 다중의 값을 선택할 수 있습니다. 

다만  요소를 선택 시 .end() 체인을 반드시 사용해야 하는 것은 아닙니다.

//bad
$("div").fadeIn();
$("div p.one").slideDown();
$("div p.two").addClass('highlight');

 

// good
$("div")   
    .fadeIn()   
    .find('p.one')   
    .slideDown()   
    .end()   
    .find('p.two')  
    .addClass('highlight');

 

※ 부족한 번역이라 오역이나 잘못된 내용이 있을 수 있습니다. 잘못된 부분을 알려주시면 수정하겠습니다.

출처 : http://bavotasan.com/2010/tips-speed-up-jquery/