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값을 준것을 볼수있는데 이것은 메모리누수 의 원인이될수있기때문이다. 메모리누수에 대해서 자세이 보려면 다음 포스팅을 보자
댓글