FrontendLibraryjQuery

jQuery Performance

jQuery 성능 향상하기 (performance)

jQuery는 라이브러리이기 때문에 순수 자바스크립트보다 당연히 성능이 느릴 수 밖에 없다. 안 그래도 느린데 잘못된 방법으로 코딩을 하면 상황을 더 악화시킬 수 있다. 그래서 흔히들 하는 실수와 그에 대한 대처 방법을 소개 한다.

변수 저장
우선 첫 번째로 가장 간단한 건데 많이 놓치고 있는 부분이 있다. 제이쿼리로 찾은 객체를 변수에 저장하지 않는 것이다.

1
2
3
$('#zero').text('저장하지 않으면 매번 함수가 실행됩니다');
$('#zero').append('<button />');
$('#zero').css('color', '#fff');

위와 같이 $('#zero')를 여러 번 쓰는 것을 많이 봤을 것이다. 하지만 흔히 놓치는 사실이 $()는 함수라는 겁니다. 위의 코드는 매번 함수를 실행하게 된다.

1
2
3
4
5
var $zero = $('#zero');

$zero.text('이렇게 저장하면 한 번만 실행됩니다');
$zero.append('<button />');
$zero.css('color', '#fff');

변수에 재사용하게될 셀렉터를 저장하게 되면 단 한 번만 호출을 하게 되기에 성능에 좋다.

DocumentFragment 사용
jQuery가 왜 이렇게 느릴까란 질문에 꼭 나오는 부분이다. 수십, 수백 개의 태그를 동적으로 추가하는 데 documentFragement를 사용하지 않고 그냥 append 했기 때문에 나타나는 현상이다.

1
2
3
4
5
var $zero = $('#zero');

['Aero', 'Bero', 'Cero', 'Dero', ... , 'Zero'].forEach(function(item) {
    $zero.append('<strong>' + item + '</strong>');
});

위와 같이 간단하게 할 수도 있지만 기존에 있는 태그에 append하는 것은 성능에 매우 부담이 가게된다. 또 26번 반복하기 때문에 브라우저는 26번이나 페이지를 새로 그려야 한다. 만약 반복문의 개수가 수백 수천개라고 생각해보면 더 성능이 느려질 것이다. 이럴때는 documentFragement을 활용하면 성능에 도움이 된다

1
2
3
4
5
6
var $frag = $(document.createDocumentFragment());

['Aero', 'Bero', 'Cero', 'Dero', ... , 'Zero'].forEach(function(item) {
    $frag.append('<strong>' + item + '</strong>');
});
$('#zero').append($frag);

$frag에 append하는 것은 가상의 메모리 공간에서 일어나는 일이기 때문에 브라우저와는 상관이 없다. 위에 코드는 마지막에 그 $frag를 원래 태그에 한 번에 append해주는 것이다. 이렇게 하면 단 한번만 브라우저에 태그가 추가되어 브라우저가 페이지를 새로 그리는 횟수도 한 번만 그리 된다.

다른 방법도 있다. 바로 detach 메소드를 사용하는 것이다.
detach() 메서드는 노드를 DOM에서 제거 하면서 캐싱한다. (캐싱될때 노드의 정보는 jQuery 데이터 형태로 이전에 등록되었던 이벤트, 정보들도 함께 캐싱하게 된다.) DOM에서 제거했다가 추후에 다시 삽입하는 형태로 사용 가능하다. 캐싱된 노드를 다시 DOM에 삽입 후, 이벤트를 다시 등록해 줄 필요가 없다.

1
2
3
4
5
6
var $zero = $('#zero').detach();

['Aero', 'Bero', 'Cero', 'Dero', ... , 'Zero'].forEach(function(item) {
    $zero.append('<strong>' + item + '</strong>');
});
$zero.appendTo($zeroParent);

detach 메소드를 사용하는 순간 원래 있던 #zero 태그는 브라우저에서 떨어져서 메모리 속으로 들어간다. 메모리 상에서 append를 해준 후 마지막에 다시 원래 태그의 부모의 자식으로 추가하는 것이다.

선택자 최적화
jQuery 선택자를 사용하는 데 있어 많은 실수를 하곤 한다. 선택자는 원하는 태그를 선택할 수 있을 정도로만 최소화해서 사용해야 한다. 예를 들면 $('div#zero')는 간단히 $('#zero')로 표현할 수 있다. 어차피 id는 유니크한 단 하나의 태그만 가리키기 때문이다.
또한 id나 class를 사용하는 게 좋은데 $('div p a')보다는 $('#zero p a')가 훨씬 성능이 좋다. 찾길 원하는 태그가 있다면 id나 class를 붙여서 사용하는걸 권장한다.
그리고 제이쿼리에서 지원하는 선택자들 :input, :even, :odd 등등은 최대한 피하는 게 좋다. 순수 자바스크립트에서 지원하지 않는 만큼, 제이쿼리가 직접 구현해야 하는데 이 과정에서 성능이 저하될 수 있기 때문이다.

참조

공유하기