cách xử lý các tập dữ liệu lớn với đồng vị jquery

Question

Tôi đang lên kế hoạch sử dụng plugin đồng vị tuyệt vời để hiển thị danh sách địa chỉ liên hệ và sau đó cho phép chúng được lọc. Vấn đề tôi có là nó hoạt động tuyệt vời cho một tập dữ liệu nhỏ nhưng tôi không chắc chắn cách tốt nhất để mở rộng quy mô cho hơn 1000 mẩu dữ liệu.

Cho đến nay những ý tưởng tôi đã là:

• tải một tập hợp con ngẫu nhiên và sau đó thêm các nút để nó như là bộ lọc được nhấp vào để lấp đầy khoảng trống
• tải nhiều nút như một người dùng cuộn
• phân trang kết quả
• không hiển thị liên hệ cho đến khi đủ bộ lọc đã được chọn để đưa các con số xuống dưới ngưỡng được xác định trước.

Tôi không chắc chắn nếu những điều này sẽ hoạt động tốt và tôi hy vọng những người khác đã phải đối mặt với tình huống này và có thể cho tôi một số ý tưởng.

Answer 1

Tình huống bạn mô tả khá phổ biến: cách cung cấp cho người dùng quyền truy cập vào nhiều dữ liệu hơn số liệu có thể xem chi tiết cùng một lúc.

Có một số cách để trả lời câu hỏi và câu trả lời đúng hoàn toàn chủ quan: nó phụ thuộc vào những gì người dùng của bạn đang cố gắng xem hoặc làm với các liên hệ.Trước khi bạn thực sự có thể có được một giải pháp thỏa đáng, bạn cần phải biết những gì người dùng sẽ sử dụng các địa chỉ liên lạc cho.

Chỉ cần đoán (nhưng bạn sẽ biết rõ hơn tôi!), Tôi mong muốn có hai điều mà họ đang thực hiện:

• Lookup: Tìm kiếm một số liên lạc cụ thể và họ đã biết tên của họ/xử lý.
• Khám phá: Tìm kiếm một liên hệ cụ thể nhưng họ không thể nhớ tên/xử lý của họ. Hoặc họ chỉ duyệt web.

Nếu bạn lọc cho tất cả các giải pháp, thì mục tiêu Lookup khá nhiều trong túi. Mục tiêu Khám phá là mục tiêu mà bạn muốn thiết kế cho:

• Bộ sưu tập ngẫu nhiên: Đây không phải là cách tuyệt vời để duyệt vì bạn về cơ bản là để lại để xem mọi thứ mới. Khó lọc khi bạn không biết chính xác những gì bạn đang tìm kiếm.
• Cuộn vô hạn: có vẻ như là một giải pháp phổ biến trong những ngày này. Tôi thấy nó cồng kềnh, đặc biệt nếu bạn là 'vô hạn' di chuyển qua 1000 địa chỉ liên hệ. Có lẽ không tuyệt vời cho mục tiêu Khám phá.
• Phân trang: Cũng cồng kềnh - nhưng có lẽ nếu phân trang được gắn với sắp xếp theo thứ tự bảng chữ cái, điều này có thể hoạt động tốt.
• Hạn chế ngưỡng: vì vậy ... chỉ cần dựa vào bộ lọc? Điều này có thể xấu trong một số trường hợp góc trong đó người dùng áp dụng một bộ lọc và họ không thấy bất kỳ điều gì b/c ngưỡng vẫn chưa được đáp ứng (có thể có số lô của những người có họ là Johnson, những gì bạn đã tìm kiếm). Ngoài ra, tôi nghĩ khả năng duyệt web rất quan trọng khi bạn không biết mình đang tìm kiếm gì.

---

Tôi nghĩ rằng nếu tôi là trong đôi giày của bạn, tôi muốn giới thiệu một số phân nhóm của các điểm tiếp xúc. Tôi nghi ngờ rằng 1000+ địa chỉ liên lạc là một vấn đề hiệu suất (ít hơn bạn đang nói một triệu!), Do đó, 10000+ thực sự là một hạn chế người dùng: họ chỉ không thể xem 1000 địa chỉ liên lạc cùng một lúc.

Tôi khuyên bạn nên giới thiệu một số cụm, có thể là họ hoặc họ và tên. Sau đó trình bày cho người dùng một cách để đi sâu vào một cụm nhưng gấp lên tất cả các địa chỉ liên hệ khác để chúng không hiển thị ngay lập tức. Một cái gì đó trong ream của accordian/rollodex paradigm. Điều này mang đến cho người dùng ảo tưởng rằng họ đang làm việc với 'tất cả các liên hệ'. Có thể giới thiệu một số tối thiểu cho mỗi cụm sao cho nếu cụm là đủ nhỏ, bạn không bận tâm hiển thị nó (ví dụ, tại sao hiển thị một cụm cho 2 hoặc 3 hoặc 5 địa chỉ liên lạc - chỉ hiển thị các liên hệ). Khi các bộ lọc được áp dụng sau đó, các cụm tan đi.

Answer 2

Lấy ý tưởng của Đọc Qua Cache, một cái gì đó như:

• tạo ra một phương pháp có thể tải một loạt lên đến 100 (hoặc bất kỳ số cấu hình) các yếu tố. Nó sẽ:
  • tìm kiếm trong bộ nhớ cache (JS mảng với khóa chính ID của phần tử) cho các mục lọc
  • yêu cầu của AJAX các mục lọc
  • mục trả về bởi AJAX sẽ được bổ sung vào bộ nhớ cache
  • các mặt hàng được AJAX trả về cũng sẽ được thêm vào vùng "tải" ở dưới cùng của DOM (xem bên dưới), với id của các DIV đã tạo khóa chính của phần tử
  • máy chủ sẽ gửi tới 100 các yếu tố. Nếu không có bộ lọc, nó sẽ gửi các phần tử tiếp theo chưa được gửi đi. Bạn sẽ cần theo dõi các phần tử đã tải. Nếu kích thước của dữ liệu được lưu trữ trên phía máy chủ (tức là phiên) là rất quan trọng, bạn có thể theo dõi chỉ ID được gửi liên tục cao nhất (nghĩa là nếu bạn gửi ID lô thứ nhất 1,2,3,6,9,10, thì ID cao nhất là 3, vì vậy thời gian tiếp theo bạn sẽ gửi từ 4, ..., vì vậy bạn giữ trong phiên chỉ có một giá trị)
• tạo ra một phương pháp mà có thể di chuyển DIV cache đến/từ container đồng vị
• onDomReady tải bằng cách sử dụng phương pháp ở trên và hiển thị 20 phần tử đầu tiên theo thứ tự tự nhiên (trong trường hợp của bạn, nó sẽ theo thứ tự bảng chữ cái theo tên). Nó có thể là 20 phần tử hoặc 50 hoặc bất kỳ ...
• trong nền, tải trong vòng lặp bởi AJAX và theo lô 100 tất cả các phần tử.

khu vực tải có thể là đơn giản:

<html> 
    <body> 
    <!-- the page stuff --> 
    <div id="loader" style='display:none'> 
     <!-- all elements are loaded here --> 
     <div class="item">...</div> 
    </div> 
    </body> 
</html> 

Bằng cách này bạn có thể tải tất cả các yếu tố từng bước trong DOM, và bạn có thể chỉ hiển thị những gì cần thiết.

Answer 3

Tôi đã gặp phải hiệu suất kém khi thêm và sắp xếp một số lượng lớn các mục đồng vị và đó là vì tôi đã thêm các mục tăng dần thay vì theo lô. Nó phải là một sự lựa chọn rõ ràng, nhưng một cái gì đó mà tôi đã bỏ qua.

Đảm bảo sử dụng mảng hoặc danh sách các phần tử, trái ngược với tải hoặc xóa riêng lẻ.

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