출처 : http://yubylab.tistory.com/entry/jQuery-jQuery-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94

여전히 DOM을 다루는데 있어서는 jQuery는 최고의 라이브러리중 하나라고 생각을 합니다. 이전에 jQuery 제대로 사용하기라는 글을 썻습니다. 그때는 jQeruy의 Bad Practice 에 초점을 맞췄다면 이번에는 Performance 측면에서의 jQuery 코드작성법에 대해서 알아보겠습니다. 

<ul id="list"></ul>

로 빈 리스트를 마크업해둔상태에서 Ajax 를 통해 DOM을 붙이는 작업이 있습니다. 코드를 한번 보겠습니다.

$.each( myArray, function( i, item ) {

    var newListItem = "<li>" + item + "</li>";

    $( "#list" ).append( newListItem );

});

전달받은 myArray를 each문을 돌면서 하나하나 ul#list에 붙이는 작업이니 일단 원하는 결과를 얻었습니다. 그런데 위의 경우에는 매번 ul#list에 하나하나 엘리먼트를 붙이는 작업입니다. 배열의 엘리먼트의 갯수가 많아는 경우에는 그 갯수만큼 DOM을 조작해야하는 비용적인 측면에서 매우 과한 소비가 일어나게 됩니다.

DOM조작은 될수있으면 최소화 하는 것을 지향해야합니다. 위의 코드는 다음과 같이 작성가능합니다.

var myHtml = "";

$.each( myArray, function( i, item ) {

    myHtml += "<li>" + item + "</li>";

});

$( "#ballers" ).html( myHtml );

for(var i=0; i < element.length; i++){
     // Do something
}

var sec =0;
setInterval(function(){
     sec++;
     $('#timmer').html(sec);
},1000);

var myLength = myArray.length;
for ( var i = 0; i < myLength; i++ ) {
    // do stuff
}

var sec =0;
var timmer  = $('#timmer');
setInterval(function(){
     sec++;
     timmer.html(sec);
},1000);

var table = $('#table');
$.ajax({
     .....
     success: function(list){
          table.children().remove();
          table.append(...)     
     }
})

var table = $('#table');
$.ajax({
     .....
     success: function(list){
          table.detach();
          table.append(...)     
     }
})

$('#popup').hide();
.. Do Something
$('#popup').show();

var popup = $('#popup');
if(popup.length){
     popup.hide();
}

jQuery.fn.popup = function( func){
     this.length && func.apply(this);
     return this;
}

$('#popup').popup(function(){
     ... Do Somthing
})

// Slower (the zero-based :even selector is a jQuery extension)
$( "#my-table tr:even" );

// Better, though not exactly equivalent
$( "#my-table tr:nth-child(odd)" );

$( ".data table.attendees td.gonzalez" );

// Better: Drop the middle if possible.
$( ".data td.gonzalez" );

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

// Fine for up to 20 elements, slow after that:
$( "a.swedberg" ).css( "color", "#0769ad" );

// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
    .appendTo( "head" );