자바스크립트 메모리 누수

자바스크립트 메모리 누수

C언어들에서는 임시적으로 지정한 포인트라던가 이런것들이 자동 삭제 되지만 자바스크립트에서는 그렇지않다.별도 용도로 지정한 변수가 역할이 끝났지만 그대로 남아있기에 메모리를 여전히 차지하게되고 따라서 후에 많은 함수들이 사용되면 언제 방해될지모르는일이다.이를 메모리 누수(memory leak)라고 말한다

테이블 정렬 수행속도테이블 정렬 수행속도이포스팅의 예제를다시보자

           $.each(rows, function(index, row) {
             row.sortKey = $(row).children('td').eq(column)
             //별도로 sortKey 로 지정해주고 
               .text().toUpperCase();
           });
           rows.sort(function(a, b) {
           //여기서 따로 수행처리하도록
             if (a.sortKey < b.sortKey) return -1;
             if (a.sortKey > b.sortKey) return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
             $table.children('tbody').append(row);
             row.sortKey = null;
             //expendo인 sortKey를 null로 지정
           });

마지막 부분엔 수행처리를 빨리 하기위해 별도로 지정해 주었던 변수 sortKey를 null로 지정해주고있다.이것이 메모리누수를 예방하는 방법중 하나이다.

expendo

앞에서 계속 임시로 만든 변수라고 언급했는데 위에서 본예제와 같이 지정되지않은 원래DOM의 속성이아니라 개발자가 새로추가한 속성을 expendo라한다.이것으로 수행속도가 나아지지만 한편으로 메모리를 그대로 차지하고있기에 문제되는경우도있다.따라서 가급적 마지막에 null로 처리하라고 권유하는것도 그때문이다.

jquery에서 제공하는 함수

위와같이 expendo 값을 null로 처리하는 방법도 있지만. jquery의 함수인 .data(), .removeData()를 사용할 수도있다.

           $.each(rows, function(index, row) {
             $(row).data('sortKey'), $(row).children('td')
             //td엘리먼트에서 data함수로 sortKey값을 읽는다
               .eq(column)
               .text().toUpperCase());});
           rows.sort(function(a, b) {
             if ($(a).data('sortKey') < $(b).data('sortKey') )
             //a엘리먼트에서 data함수로 sortKey값을 읽는다
              return -1;
             if ($(a).data('sortKey') > $(b).data('sortKey') ) 
              return 1;
             return 0;
           });
           $.each(rows, function(index, row) {
           $table.children('tbody').append(row);
           $(row).removeData('sortKey');});
           //removeData로 제거

.data()함수로 읽어들이는역할을 했고 마지막으로 .removeData()로 제거시켰다.굳이 이두함수를 사용하는경우는 IE때문이다 IE는 때로는 이벤트에 제거하려는 변수가 포함되어있을시 제거할수없다 이때 jquery의 data함수를 사용하는것이 안전하다