연락처 목록을 표시하고 필터링 할 수 있도록 위대한 동위 원소 플러그인을 사용할 계획입니다. 내가 가진 문제는 작은 데이터 세트에 대해서는 훌륭하게 작동하지만 1000 개 이상의 데이터를 확장하는 가장 좋은 방법은 확실하지 않다는 것입니다. 내가 가진jquery 동위 원소로 큰 데이터 세트를 처리하는 방법
지금까지 아이디어를했다 : 필터는 사용자가 스크롤로 더 많은 노드를로드 간격
잘 작동하고 다른 사람들이 이러한 상황에 직면하여 나에게 몇 가지 아이디어를 줄 수 있는지 잘 모르겠습니다.
당신이 묘사하는 상황은 꽤 일반적입니다 : 사용자가 한 번에 자세히 볼 수있는 것보다 많은 데이터에 액세스 할 수있는 방법.
질문에 대답하는 데 몇 가지 방법이 있으며 정답은 완전히 주관적입니다. 즉, 사용자가 연락처를 보거나 무엇을하려고하는지에 따라 달라집니다.실제로 만족스러운 솔루션을 얻으려면 사용자가 연락처를 사용하려고하는 대상을 알아야합니다.
단지 (하지만 당신은 나보다 더 잘 알 것입니다!), 내가 거기에 그들이하고있는 두 가지 있습니다 기대 추측 :/특정 연락처를 찾고 그리고 그들은 이미 자신의 이름을 알고 :
모든 솔루션을 필터링하는 경우 조회 목표는 거의 가방에 있습니다.
나는 내가 당신 입장이라면, 내가 접점의 일부 클러스터링을 소개 거라고 생각합니다. 나는 1000+ 접촉이 성능 문제의 상당 부분을 차지하는 것을 의심한다. (당신이 말하는 것만 큼은 적다!) 그래서 10000+는 정말로 사용자 제약이다 : 그들은 단지 1000 개의 연락처를 한 번에 볼 수 없다.
클러스터링 소개는 아마도 성 또는 이름으로 시작하는 것이 좋습니다. 그런 다음 사용자에게 한 클러스터로 드릴링 할 수있는 방법을 제시하고 다른 모든 연락처를 접어서 즉시 볼 수 없게하십시오. 뭔가가 연계되어 accordian/rollodex paradigm입니다. 이렇게하면 사용자는 '모든 연락처'로 작업하고 있다는 환상을 갖게됩니다. 클러스터가 충분히 작 으면 표시하지 않아도됩니다 (즉, 2 또는 3 또는 5 연락처에 대한 클러스터 표시 - 연락처 표시). 필터가 적용되면 클러스터가 사라집니다.
캐시를 통해 읽기의 아이디어를 복용, 뭔가 같은 :
로드 영역은 단순히 수 :
<html>
<body>
<!-- the page stuff -->
<div id="loader" style='display:none'>
<!-- all elements are loaded here -->
<div class="item">...</div>
</div>
</body>
</html>
이 방법이 모든 요소가 DOM에 단계별로로드 할 수 있습니다, 당신은 필요한 것만 표시 할 수 있습니다.
사용자/동위 원소 시스템에 문제가되기 전에 dom에 몇 개의 항목을로드 할 수 있습니까? – Josh
테스트 페이지를 만들었습니다. 두 개의 "임의 재생"및 "삽입"은 액션입니다 : 텍스트 상자에 삽입 할 항목 수를 입력하고 삽입을 클릭하십시오. 경고 : 약 1 분 이상> 1 분 더 걸립니다. http://dev.rochefolle.net/iso/iso.html – JScoobyCed
DOM에 대해서도 확인할 수 있지만, 제한은 동위 원소 코드보다 훨씬 높다고 말할 수 있습니다. 동위 원소 컨테이너에 제한적이고 필터링 된 수의 요소 만 표시하는 경우 DOM에 여러 개의 1000을로드 할 수 있습니다. 위의 테스트 페이지에서 1000 개의 요소가 추가되면 shuffle은 응답하지만 너무 유동적이지는 않습니다 (저는 우분투에서 FF 10을 실행 중입니다) – JScoobyCed
대량의 동위 원소를 추가하고 정렬 할 때 성능이 저하되었습니다. 이는 배치보다는 점진적으로 항목을 추가했기 때문입니다. 그것은 명백한 선택이어야하지만 내가 간과 한 것입니다.
개별적으로로드 또는 제거하지 말고 배열 또는 요소 목록을 사용해야합니다.
incomingData=['<div>a</div>','<div>b</div>'];
elements=[];
jQuery.each(incomingData,function(ind,val){
var element = jQuery(val).get(0);
//$container.isotope('insert', element); //resource heavy
elements.push(element);
});
$container.isotope('insert', elements); //less processing
특히 직면하는 병목 현상은 무엇입니까? 서버에서 클라이언트로 정보 전송? 스크린에있는 많은 요소를 렌더링하고 애니 메이팅할까요? 유용한 인터페이스를 제공하기 만하면됩니까? 다른 것? – slifty
인터페이스 및 인터페이스를 구성하는 가장 좋은 방법에 대해 자세히 알아보십시오. 분명히 응답 성이 있어야합니다. – Josh