新しいデータがコレクションに追加されると、バックボーンの表示に時間がかかる

Question

私はバックボーンが新しく、バックボーンに組み込まれたCMSで作業しています。 CMSによって、作成者はウェブサイトの新しいホームページを追加できます。 APIからの50項目の応答のサイズは約25MBです。私のHTMLページにはロードボタンがあり、クリックするとイベントが発生し、さらに50個のアイテムがロードされます。私が直面している問題は、ビューが消える、つまりビューが消えてユーザーがビューのロード前にどこにいたのかを忘れてしまったときに、ビューがロードするまでに時間がかかるということです。表示のレンダリングをずっと速くして消えないようにする方法はありますか？ユーザーは正確に彼がどこにいるかを覚えています。クラスload-moreのボタンがクリックされると、より多くのデータをロードするイベントが発生します。 ここに私のコードの一部があります。 ビュー：私のコレクションで

cms.views.Homepages = Backbone.View.extend({ 

events: { 
'click .filter li': 'filterArticles', 
'click .list-column-title' : 'openLink', 
'click .homepageAction': 'updateHomepageStatus', 
'click .more-actions .delete': 'deleteHomepage', 
'click .more-actions .duplicate': 'duplicate', 
'click .editPubDate': 'editPubDate', 
'click .next': 'nextItems', 
'click .prev': 'prevItems', 
'click .load-more': 'loadMore' 
}, initialize: function(homepages, articles) { 

this.template = new EJS({url: 'app/views/root/homepages/homepages.template.ejs'}); 
this.homepagesTableTemplate = new EJS({url: 'app/views/root/homepages/homepages-table.template.ejs'}); 
this.listenTo(cms.data.homepages, 'loaded', this.displayTable,this.render); 
cms.data.homepages.load(); 


this.listenTo(cms.data.homepages, 'nomoreload', this.disableMoreLoad) 

this.initDialogs();}, 


render: function(options) { 

var html = this.template.render({homepages: cms.data.homepages.toJSON()}); 
this.$el.html(html); 
return this; 
}, 

loadMore: function(e) { 
e.preventDefault(); 

this.collection.loadMore(); 
//this.collection.reset(newmodel.loadMore()); 
console.log(this.collection);} 

コード

cms.collections.HomePages = Backbone.Collection.extend({ 

model: cms.models.HomePage, 

currentPage: 0, 

url: function() { 
//console.log(this, this.currentPage) 
return cms.config.BASE_URL + 'cms/homepage?page=' + this.currentPage + '&per_page=50&filter[sort]=creationdate_desc' 
}, 
loadMore: function() { 
this.currentPage ++; 
var self = this; 
this.fetch({ 
    success: function(collection, response) { 
    self.trigger('loaded', null); 
    // if response less than 50 -> end of load  
    console.log(collection); 

    if (response.length === 0) { 
     self.trigger('nomoreload', null); 
    } 

    }, 
    error: function() { 
    self.trigger('loaded', true); 
    }, 
    remove: false 
}); 

Answer 1

25、Emile Bergeron rightly mentionedとして、MBは、ホームページ上のデータがたくさんあります。このような状況では、コードを最適化してチャンクで応答し、ユーザーに必要なものだけを表示する必要があります。
もう1つの方法は、Webワーカーにある量のデータを保存することです。ネットワークワーカーを避けてそこから直接データのチャンクを提供することができます。必要に応じて新しいデータを取得し、以前の古いデータを消去してWebワーカーに保存します。