jQuery Performance

jQuery 성능에 대한 넋두리

이번 시간에는 jQuery 성능에 대해서 이야기를 하려고 합니다. 

jQuery는 정말로 많은 기능을 개발자가 사용하기 쉬운 형태로 제공하고 있습니다. 하지만 얻는 게 있다면 잃는 것도 있는 게 세상의 이치이듯 jQeury의 강력한 기능을 사용함으로써 개발에 드는 공수는 줄어 들지만 클라이언트의 부하는 증가하게 됩니다. 하지만 앞으로 설명드릴 내용을 이해 하신다면 어느 정도의 부하를 줄일 수 있습니다.

말은 거창하게 시작했지만 크게 어렵거나 한 부분은 없으니, 부담 없이 강좌를 봐 주시면 되겠습니다.

첫 번째 - 셀렉터의 구체화

다른 사람을 이해시키기 위해서 자세하게 설명 하듯이 jQuery도 마찬가지로 원하는 기능에 대해 자세히 알려주면 성능이 올라갑니다.

$(‘#elementID’), $(‘elementName’)는 조금 상황이 다르지만, “class” 또는 “attribute”를 통한 셀렉트시에는 최대한 자세히 명시를 해 주는 것이 성능에 큰 도움이 됩니다. 셀렉터의 “class”를 이용할 경우에는 단순히 $(“.myClass”) 보다는 $(“div > ul > li.class”)처럼 많은 정보를 주면 jQuery가 HTML문서에서 탐색하는 범위가 줄어들어 성능향상의 효과가 있습니다.

두 번째 ? 셀렉터의 사용 자제

셀렉터를 사용하다 보면 같은 요소를 여러 번 셀렉트 하는 경우가 발생 하곤 합니다. 이런 경우에는 기존에 사용한 셀렉터를 재사용을 하거나, .end() 메서드를 통해 반복 사용하지 않는 것이 좋습니다. 

세 번째 ? 순수 자바스크립트 사용

jQuery는 javascirpt의 복잡한 함수로 이루어져 있습니다. jQuery의 함수를 실행할 경우 내부에서 구현된 복잡한 로직을 통해 javascript를 실행하고 있기 때문에 해당 로직을 피하게 되면 그만큼의 성능이 올라간다고 생각을 하시면 됩니다.

자주 사용하는 기능 중에 2개를 예를 들어 설명을 드리면 다음과 같습니다.

또한, DOM 처리를 할 때에도 jQuery 보다는 순수 javascript를 사용하는 것이 성능 면에서 큰 이득이니, 이 부분도 참고 하시기 바랍니다.

$(document).ready(function () {
    var $htmlData = $("<ul/>");
    for (var i = 0; i < 10; i++) {
        $htmlData.append($("<li/>").text('승연아빠(' + i.toString() + ')'));
    }
    $htmlData.appendTo('#contents');
});

$(document).ready(function () {
    var htmlData = '<ul>';
    for (var i = 0; i < 10; i++) {
        htmlData += '<li>승연아빠(' + i.toString() + ')';
    }
    htmlData += '</ul>';
    $('#contents').html(htmlData);
});

[첫 번째 방법 보다는 두 번째 방법이 성능에 좋습니다.]

네 번째 - .css()

.css() 메서드를 사용하여, 선택한 개체에 특정 스타일을 적용할 경우 내부에서 많은 처리를 하게 됩니다. 이런 경우가 많다면 스타일시트를 통한 각각의 스타일 클래스를 작성하고, 해당 클래스를 적용 하시기 바랍니다.

이 부분은 jQuery에서만 적용되는 부분이 아닌, 일반적인 javascript도 해당하는 부분이니 참고 하시기 바랍니다.