2011-05-12 4 views
1

동적으로 생성되고 jquery로 계층화 된 목록에 성능 문제가 있습니다. 나는 서버에서 JSON을 통해 내 데이터를 검색 한 다음이 함께 그것을 클라이언트 측 렌더링 :jQuery 대형 목록 성능

for (var i = 0; i < myArray.length; i++){ 
    var subArr = myArray[i]; 
    var newElm = "<li id="+subArr.node_order+" value="+subArr.id+" class='list-item'><span>"+subArr.node_name+"</span><ul></ul></li>"; 
    var parent = $("li#"+subArr.parent_id+" ul"); 

    if(parent[0] != undefined){ 
     $(parent[0]).append(newElm); 
    } else{ 
     sortable.html("<ul>"+newElm+"</ul>"); 
    } 
} 

목록은 최대 15,000 목록 '리'항목을 할 수 있습니다. 약 6500 개의 항목이 있으면 서버에서 데이터가 검색됩니다. 1.5 초이지만 그 후 약 4.4 초가 지나면 목록을 작성하고 페인트합니다. 이것은 지금까지 본 것 중 가장 빠르지 만 11k + 항목은 정상입니다. 또한이 목록은 드래그/드롭 가능하고 매우 동적이어서 드래그/드롭 핑이 '스팬'위로 가져갈 때까지 활성화되지 않기 때문에 모든 pluggins을 최소화하려고합니다.

모든 포인터를 매우 높이 평가합니다!

+1

에 JQuery와 성능 및 추가 항목을 안내합니다. 사용자가 한 번에 15k 개 항목을 보지 못한다는 점에서! 먼저 클라이언트를 렌더링하십시오. 모든 것이 끝날 때까지 다음 단계로 진행하십시오. 또는 linq, xml 변환 등의 대신에 서버 측 렌더링을 사용해야 할 것입니다. – ppumkin

+0

첫 번째 500을로드 한 다음 아약스 코드를 사용하여 서버에서 다른 500을 가져 오는 것과 같이 작은 부분으로 나누는 것이 좋습니다. 하지만 11k +는 html과 js를 통해 처리 할 수있는 soo입니다 (제 생각에는) –

답변