Tôi có chế độ xem bảng công việc hiển thị tất cả công việc của người dùng. Bộ sưu tập công việc fetch() có thể có khả năng trả về chứa hàng ngàn bản ghi. Tôi chạy một thử nghiệm và chèn 1000 hồ sơ công việc trong DB và thực hiện một fetch() trên bộ sưu tập. Tuy nhiên, 1000 bản ghi có vẻ quá nhiều để trình duyệt xử lý vì việc chèn 1000 hàng trong bảng DOM dường như làm cho trình duyệt đóng băng.Backbone.js fetch() tập hợp lớn khiến tập lệnh đóng băng
Có cách nào tốt hơn để tối ưu hóa hiển thị các hàng để nó hoạt động nhanh hơn không? Tôi biết bạn luôn có thể thực hiện tìm nạp một phần (tìm nạp 100 bản ghi ban đầu và bổ sung tìm nạp 100 bản ghi mỗi khi người dùng cuộn xuống cuối màn hình), nhưng tôi thường chống lại ý tưởng này kể từ khi cuộn xuống 100 bản ghi và phải đợi 3 -4 giây trước khi nó hiển thị thêm 100 bản ghi có vẻ dẫn đến trải nghiệm người dùng kém.
Dưới đây là mã của tôi:
FM.Views.JobTable = Backbone.View.extend({
initialize: function(){
_.bindAll(this, 'render', 'refresh', 'appendItem');
this.collection.bind('add', this.appendItem, this);
this.collection.bind('reset', this.refresh, this);
},
render: function(){
this.el = ich.JobTable({});
$(this.el).addClass('loading');
return this;
},
refresh: function(){
$('tbody tr', this.el).remove();
$(this.el).removeClass('loading');
_(this.collection.models).each(function(item){ // in case collection is not empty
this.appendItem(item);
}, this);
return this;
},
appendItem: function(item){
var jobRow = new FM.Views.JobTableRow({
model: item
});
$('tbody', this.el).prepend(jobRow.render().el);
$(jobRow).bind('FM_JobSelected', this.triggerSelected);
}
});
FM.Views.JobTableRow = Backbone.View.extend({
tagName: 'tr',
initialize: function(){
_.bindAll(this, 'render', 'remove', 'triggerSelected');
this.model.bind('remove', this.remove);
},
render: function(){
var j = this.model.toJSON();
j.quantity = j.quantity ? number_format(j.quantity, 0) : '';
j.date_start = date('M j Y', j.date_start);
j.date_due = j.date_due ? date('M j Y', strtotime(j.date_due)) : '';
j.paid_class = j.paid;
j.status_class = j.status;
j.paid = slug2words(j.paid);
j.status = slug2words(j.status);
this.el = ich.JobTableRow(j);
$(this.el).bind('click', this.triggerSelected);
return this;
}
});
Tôi đã thử ví dụ trong bài đăng trên blog và nó thực sự dường như không cải thiện hiệu suất nhiều. Cho dù bạn đang phụ thêm vào DOM hay phụ thêm vào một phần tử trong bộ nhớ, bạn vẫn đang gọi hàm append của jQuery() 1000 lần – peter
có nhưng jquery chắp thêm mà không làm việc đó với chính nó là nhanh hơn. thậm chí như vậy, vẫn còn các giải pháp tốt hơn, nó có thể trông bẩn thỉu, nhưng xây dựng html của bạn theo cách thủ công (hoặc với các mẫu) và làm một $ (elem) .html (myBuildUpHtmlString); thậm chí còn nhanh hơn sau đó bạn không có 1000 phụ thêm. – Sander