본문 바로가기
Ajax

jquery를 이용한 ajax 테이블 정렬 수행속도

by 샷타이거 2010. 2. 17.

jquery를 이용한 ajax 테이블 정렬 수행속도

테이블정렬을 해보았다면 이번에 수행속도를 좀더 올려보자

테이블 정렬 참조포스트jquery를 이용한ajax 테이블 정렬

위의포스팅에서 정렬처리구문은 다음과 같았다.

           rows.sort(function(a, b) {
             var keyA = $(a).children('td').eq(column).text()
               .toUpperCase();
             var keyB = $(b).children('td').eq(column).text()
               .toUpperCase();
             if (keyA < keyB) return -1;
             if (keyA > keyB) return 1;
             return 0;
           });
          $.each(rows, function(index, row) {

위와같은경우는 비교할때 key를 일일이 로드해서 비교하기에 시간이 걸린다.미리 계산하는방법을 고안해보자

           $.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;
           });

위구문은 key를 찾는구문과 비교구문을 별도로 분리하고있다.따라서 수행속도가 좀더빨라질것이다. 별도로 sortKey라는 변수로 정해주고 그처리구문을 아래에서 해주도록되어있다.

확하려면 여기로..데이타량이 예시로 짧게 했기에 그전의 예제와 큰 속도차이는 못느낄 것이다.테이블에 많은 데이타를넣고 시험해보면 알수있을 것이다.

자바스크립트 메모리 누수

마지막구문을 보면은 row.sortKey = null 에서 null값을 준것을 볼수있는데 이것은 메모리누수 의 원인이될수있기때문이다. 메모리누수에 대해서 자세이 보려면 다음 포스팅을 보자

자바스크립트 메모리누수

댓글