append()를 정확히 써야 하는 43,439가지 이유

jQuery에서 append()등의 함수를 사용하다보면 그동안 DOM을 얼마나 무식하게 만지고 있었는지 느끼게 됩니다. 하지만 이 append()를 사용 할 때도 잘 사용해야지 잘못하면 JavaScript의 실행 속도가 무지 느려지게 된다고 합니다.

일단 원문에서 사용한 예제를 하나 보여드리지요.

var arr = reallyLongArray;
$.each(arr, function(count, item) {
    var newTd = $('').html(item).attr('name','pieTD');
    var newTr = $('');
    newTr.append(newTd);
    $('table').append(newTr);
});

저도 위와 같이 append()되는 녀석들을 만들어서 append()합니다. 더 심하게 하면 $(‘<td></td>’)를 사용하지 않고 $(document.createElement(“td”))와 같이 사용합니다.

하지만 원문에서는 이렇게 하면 상당히 느리다네요. 그러면서 다음과 같이 했더니 3배 정도 더 빨라졌다고 합니다.

var arr = reallyLongArray;
$.each(arr, function(count, item) {
    var newTr = '' + item + '';
    $('table').append(newTr);
});

뭐가 달라 보이시나요? … 네 append() 사용 수가 줄었습니다. 그리고 TD, TR을 각각 하나씩 만들어 append()하지 않고 내용을 한번에 만들어 append()를 하도록 했습니다. 즉, 완벽한 tr 하나를 만들어 table에 추가하도록 한것입니다.

엇! 실행 속도를 더 빨리 할 수 있는 것이 있다네요. 좀더 볼까요?

var arr = reallyLongArray;
var textToInsert = '';
$.each(arr, function(count, item) {
    textToInsert  += '' + item + '';
});
$('table').append(textToInsert);

음… 위에 보시면 뭐가 달라졌는지 아시겠나요? … 네. 바로 append() 를 $.each() 함수 밖으로 빼버렸습니다. 즉, table에 추가되는 내용을 한번만 append()하도록 했습니다. 그렇게 하기 위해 추가되는 내용을 arr이라는 변수에 문자열로 담아 버렸군요. 오호. 문자열로 전부 담아버렸답니다.

엇! 조금더 빨리 하는 것이 있다네요. 더 볼까요?

var arr = reallyLongArray;
var textToInsert = [];
var i = 0;
$.each(arr, function(count, item) {
    textToInsert[i++]  = '';
    textToInsert[i++] = item;
    textToInsert[i++] = '';
});
$('table').append(textToInsert.join(''));

아하~~ 아시겠나요? table에 들어가는 Elements들을 변수 하나에 넣지 않고 배열에 넣었군요. 들어가야 하는 내용이 아주아주 많은 경우 변수 하나에 문자열로 주~~욱 넣는것보다 배열로 나눠서 넣으면 속도가 조금 빨라지나 봅니다. 배열을 join해서 append 하는데 하나의 변수에 내용을 계속 추가하는 시간보다 배열로 저장하고 join()하는 시간이 더 짧게 걸리나 봅니다.

마지막으로 아래와 같이 하면 더 속도를 빨리 할 수 있다고 합니다.

var arr = reallyLongArray;
var textToInsert = [];
var i = 0;
var length = arr.length;
for (var a = 0; a <length; a += 1) {
    textToInsert[i++]  = '';
    textToInsert[i++] = arr[a];
    textToInsert[i++] = ' ' ;

}
$('table').append(textToInsert.join(''));

이번에는 뭐가 다를까요? … 네! $.each() 함수를 사용하지 않았습니다. $.each()함수도 어찌보면 jQuery 함수라 불필요한 로직이 있을 수 있습니다. 따라서 단순한 반복이라면 for문을 사용하는 것이 더 빠르다는 것이네요.

이상과 같이 append()할때 몇가지 사항을 적용해 주면 실행 속도가 상당히 빨라진다고 하니 상품목록을 생성하거나 RSS Item들을 생성할때 사용해 보면 좀더 빨라 질것 같네요.

아래 원문링크를 들어 가시면 브라우저별로 실행한 결과를 보실 수 있습니다. 또 각각의 예문의 실행 시간이 얼마나 되는지도 확인 하실 수 있습니다.

ps1: 원문에 달려 있는 코멘트 중에서 table에 들어가는 내용을 tbody태그로 둘러 싸서 아래와 같이 넣으면 tbody로 감싸지 않았을때보다 속도가 더 빨라진다고 합니다. 그것도 6배나 !!!!

$('#testTable').append('' + newTr + '');

ps2: 왜? 43,439가지 이유가 있는지는 모르겠네요. 혹시 아시는 분 알려주세요 ^^;;;;

원문 링크

Advertisements

Published by: benant

WEB PROGRAMMER. PHP, ASP, XML, Javascript, VBScript, PL/SQL, MySQL, Oracle. scrollads.co.kr 새로운 모바일 광고 서비스. trenue.com 시스탬 트래이딩 서비스. blogman.co.kr 블로그 운영 관리 서비스. creget.co.kr 해외 상품 구매대행. 핫딜 정보 제공 서비스. fgshop.co.kr - 독립형 쇼핑몰 솔루션.

카테고리 Web태그댓글 4개

4 thoughts on “append()를 정확히 써야 하는 43,439가지 이유”

  1. document.createElement(“td”))를 쓴 예문은 없나요?
    document.createElement(“td”))를 어디에 어떻게 써야 할지 모르겠습니다.

    1. 답글이 늦어 죄송합니다. 하두 오래전에 쓴 글이라 제 머리에 로딩하는데 시간도 좀 걸렸습니다.
      document.createElement(‘td’) 는 … td의 문서객체를 만드는 것인데요. 구글 검색 하시면 예제는 나올건데요. 그보다도 내용상으로보면 객체를 만들어 jQuery에 전달해서 DOM에 추가하는 작업은 느리니 피하는 것이 좋을것 같습니다. 따로 jQuery 없이 쓰신다면 써야 겠네요.

  2. 원문 하단에 += vs array.join 비교 자료가 있네요. 브라우저와 버전 차이에 따라서도 결과가 달라지는군요.
    호~ 재밌네요.

    jQuery가 상당히 유용하긴 하지만, 그만큼 별도의 처리가 들어가는걸 고려해서 작성해야겠네요. 🙂

    1. 그렇습니다. BNU님 말처럼 += 하는 것과 array.join 하는 것에 대해 브라우저마다 비교한 내용도 아주 중요한 자료라 생각됩니다.

      이 자료를 볼 때 어느 브라우저에서는 어떤 방식이 얼마나 더 빠른지를 생각하는 것보다 실행 시간이 가장 길었던 것은 무엇인지를 찾아 피하는 것이 좋을것입니다. 결과적으로 사용자들에게 표나는 것은 아주 느리게 되는 경우이니까요. ^^

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중