jQuery 성능 향상

jQuery 성능을 향상하기 위한 몇 가지 방법을 소개하겠습니다.

jQuery는 라이브러리이기 때문에 순수 자바스크립트보다 당연히 성능이 안 좋습니다.

안 그래도 느린데 잘못된 방법으로 코딩을 하면 상황을 더 악화시킬 수 있습니다.

그래서 흔히들 하는 실수와 그에 대한 대처 방법을 소개하겠습니다.

변수 저장

우선 첫 번째로 가장 간단한 건데 많이 놓치고 있는 부분이 있습니다.

제이쿼리로 찾은 객체를 변수에 저장하지 않는 겁니다.

 

$('#zero').text('저장하지 않으면 매번 함수가 실행됩니다');

$('#zero').append('<button />'); $('#zero').css('color', '#fff');

 

위와 같이 $('#zero')를 여러 번 쓰는 것을 많이 봤습니다.

하지만 흔히 놓치는 사실이 $()는 함수라는 겁니다. 위의 코드는 매번 함수를 실행합니다.  

저 함수는 어마어마하게 복잡해서 실행하는 게 오래 걸립니다.

그래서 변수에 저장해서 단 한 번만 호출하게 하는 겁니다.

 

var $zero = $('#zero'); $zero.text('이렇게 저장하면 한 번만 실행됩니다');

$zero.append('<button />'); $zero.css('color', '#fff');

 

마찬가지로 반복문을 돌 때 length도 변수에 저장하는 게 좋습니다.

for (var i = 0; i < array.length; i++) { ... }

 

위와 같이 하면 반복문을 돌 때마다 array의 length 속성을 조회해야 합니다.

var length = array.length;

for (var i = 0; i < length; i++) { ... }

DocumentFragment 사용

제이쿼리가 왜 이렇게 느릴까요라는 질문에 꼭 나오는 겁니다.

수십, 수백 개의 태그를 동적으로 추가하는 데 documentFragement를 사용하지 않고

그냥 append 했기 때문에 나타나는 현상입니다.

var $zero = $('#zero');

['Aero', 'Bero', 'Cero', 'Dero', ... , 'Zero'].forEach(function(item) {

    $zero.append('<strong>' + item + '</strong>');

});

 

위와 같이 간단하게 할 수도 있지만 기존에 있는 태그에 append하는 것은 성능에 매우 부담이 갑니다.

또 26번 반복하기 때문에 브라우저는 26번이나 페이지를 새로 그려야 합니다.

만약 반복문의 개수가 수백 수천개라고 생각해보세요. 브라우저가 파업할 겁니다.

 

이 때 documentFragement가 여러분을 살려줍니다.

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 메소드를 사용하는 겁니다.

var $zero = $('#zero').detach();

['Aero', 'Bero', 'Cero', 'Dero', ... , 'Zero'].forEach(function(item) {

    $zero.append('<strong>' + item + '</strong>');

});

$zero.appendTo($zeroParent);

detach 메소드를 사용하는 순간 원래 있던 #zero 태그는 브라우저에서 떨어져서 메모리 속으로 들어갑니다.

메모리 상에서 append를 해준 후 마지막에 다시 원래 태그의 부모의 자식으로 추가하는 겁니다.

선택자 최적화

제이쿼리 선택자를 사용하는 데 있어 많은 실수를 하곤 합니다. 선택자는 원하는 태그를 선택할 수 있을 정도로만 최소화해서 사용해야합니다. 예를 들면 $('div#zero')는 간단히 $('#zero')로 표현할 수 있습니다. 어차피 id는 단 하나의 태그만 가리키니까요.

또한 id나 class를 사용하는 게 좋습니다. $('div p a')보다는 $('#zero p a')가 훨씬 성능이 좋습니다. 찾길 원하는 태그가 있다면 id나 class를 붙이세요. 

그리고 제이쿼리에서 지원하는 선택자들 :input, :even, :odd 등등은 최대한 피하는 게 좋습니다. 순수 자바스크립트에서 지원하지 않는 만큼, 제이쿼리가 직접 구현해야 하는데요. 이 과정에서 성능이 저하될 수 있습니다.

 

출저 : https://www.zerocho.com/category/jQuery/post/57c3a8821efc521700a70918