[web] Jquery append

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

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

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

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

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

1 2 3 4 5

var arr = reallyLongArray; $.each(arr, function(count, item) { var newTr = '<tr><td name="pieTD">' + item + '</td></tr>'; $('table').append(newTr); });

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

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

1 2 3 4 5 6

var arr = reallyLongArray; var textToInsert = ''; $.each(arr, function(count, item) { textToInsert += '<tr><td name="pieTD">' + item + '</td></tr>'; }); $('table').append(textToInsert);

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

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

1 2 3 4 5 6 7 8 9

var arr = reallyLongArray; var textToInsert = []; var i = 0; $.each(arr, function(count, item) { textToInsert[i++] = '<tr><td name="pieTD">'; textToInsert[i++] = item; textToInsert[i++] = '</td></tr>'; }); $('table').append(textToInsert.join(''));

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

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

1 2 3 4 5 6 7 8 9 10 11

var arr = reallyLongArray; var textToInsert = []; var i = 0; var length = arr.length; for (var a = 0; a <length; a += 1) { textToInsert[i++] = '<tr><td name="pieTD">'; textToInsert[i++] = arr[a]; textToInsert[i++] = '</td> </tr>' ;   } $('table').append(textToInsert.join(''));

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

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

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

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

$('#testTable').append('<tbody>' + newTr + '</tbody>');

[펌] http://devrada.tistory.com/61