JS loại bỏ và các mô hình lớn

Question

Tôi đang cố gắng tìm ra cách tốt nhất để sử dụng KnockoutJS và tôi cần lời khuyên của bạn.

Mô hình chế độ xem của tôi chứa một bộ "tài liệu", mỗi tài liệu có một bộ "giá trị". Mỗi "tài liệu" được trả lại như một bảng riêng biệt bằng cách sử dụng mẫu sau:

<div data-bind="foreach: Documents"> 
     <table data-bind="foreach: Values"> 
      <tr data-bind="foreach: $data"> 
       <td data-bind="attr: {colspan: Colspan}"> 
        <label data-bind="text: Label"></label> 
        <br /> 
        <span data-bind="html: Value"></span> 
       </td> 
      </tr> 
     </table> 
</div> 

Tất cả mọi thứ hoạt động tốt trừ khi xem các mô hình là lớn.

Ví dụ: nếu kích thước của mô hình khung là khoảng 1 megabyte (và chứa 80 tài liệu với 60 giá trị mỗi lần) thì việc hiển thị mất hơn hai phút trên máy của tôi.

Tôi tự hỏi nếu có một cách để cải thiện đáng kể hiệu suất ... Hoặc nó sẽ nhanh hơn để cung cấp cho lên trên Knockout và chỉ xây dựng html trên phía máy chủ và chỉ cần đẩy nó vào trình duyệt ...

Hiển thị "chỉ" mô hình xem 300kb mất gần 30 giây.

"Tài liệu" được xác định bởi người dùng, vì vậy thậm chí có> 2 megabyte kịch bản (Tôi không biết tại sao họ làm điều đó).

Có ai có kinh nghiệm với các mô hình chế độ xem lớn trong JavaScript không?

Answer 1

Với yêu cầu hiện tại của bạn về việc không thể tải dữ liệu lười (tải theo yêu cầu), bạn bị giới hạn.

Server Side HTML

Tạo server-side HTML sẽ là phương pháp nhanh nhất. Nhưng ngay cả như vậy nếu mô hình là rất lớn sẽ có một sự chậm trễ. Cân nhắc tải xuống tệp HTML 5MB, nó sẽ đưa trình duyệt của bạn một thời gian để phân tích cú pháp và hiển thị nội dung nào đó quá lớn.

VẪN SỬ DỤNG KnockOut JS

Nếu bạn muốn vẫn sử dụng khung Knockout JS của bạn sau đó gợi ý tốt nhất của tôi là đưa từng tài liệu trong IFRAME. Điều này không thực sự được đề xuất và sẽ đặt thêm tải trên máy chủ của bạn, nhưng nếu được triển khai chính xác sẽ tăng tốc trải nghiệm người dùng của bạn.

www.mysite.com/view/1 

<div> 
    <iframe src="www.mysite.com/view/1/document/1"></iframe></div> 
<div> 
    <iframe src="www.mysite.com/view/1/document/2"></iframe></div> 
... 

www.mysite.com/view/1/document/1 

<!-- Just the single Document template --> 
    <table data-bind="foreach: Values"> 
     <tr data-bind="foreach: $data"> 
      <td data-bind="attr: {colspan: Colspan}"> 
       <label data-bind="text: Label"></label> 
       <br /> 
       <span data-bind="html: Value"></span> 
      </td> 
     </tr> 
    </table> 

Trình duyệt của khách hàng ban đầu sẽ nhận tất cả các yêu cầu cho mỗi không đồng bộ. Mỗi yêu cầu Tài liệu đơn lẻ sẽ được hiển thị bằng cách sử dụng Knockout JS trong khung riêng của nó một cách không đồng bộ.

Để cải thiện tương tác của người dùng, bạn thậm chí có thể thiết lập sự kiện tải trên IFRAME. Sự kiện tải có thể kích thước lại IFRAME để không có thanh cuộn hoặc trích xuất HTML từ IFRAME và thay thế phần tử IFRAME bằng HTML được trích xuất.

Answer 2

Công cụ tạo mẫu gốc trong KO không quá nhanh. Tôi sẽ thử động cơ jQuery.tmpl (described here) trước tiên. Nếu điều đó không đủ nhanh, bạn nên xem xét cố gắng giảm lượng nội dung được hiển thị - giả sử chỉ hiển thị tiêu đề cho từng tài liệu ban đầu và sau đó hiển thị chi tiết khi được chọn hoặc mở rộng.

Answer 3

Không chắc chắn cách ứng dụng của bạn hoạt động nhưng nếu bạn không cần hiển thị tất cả nội dung đó cùng một lúc, bạn có thể điền mô hình của mình theo từng phần.Giống như trong một trong các ứng dụng của tôi, tôi đã xem mô hình có danh sách các mục lớn nhưng nó chỉ chứa những thứ được hiển thị trong bảng. Xem cũng đã chọn mục nhập có nhiều thông tin hơn và tôi điền nó khi một số mục được chọn từ danh sách.

Nói chung tôi đã thấy vài lần mọi người đang đặt tất cả các loại nội dung mô hình xem thậm chí nó không bao giờ được hiển thị trong giao diện người dùng. Nó có một số lợi ích nếu bạn nhận được công cụ của bạn trực tiếp từ máy chủ, nhưng mặt khác nó có thể sưng lên mô hình xem.