Ember JS性能問題

我正在研究JavaScript框架中變化檢測機制之間的基準研究。我正在比較虛擬DOM和KVO。對於KVO示例，我選擇了Ember，並且我開發了一個帶有推文列表的小演示應用程序。Ember JS性能問題

參照dev talk 2014 here據我所知 - KVO在顯示大量數據時（我認爲即使所有元素都改變了），在更改一個列表元素時應該更快一些，但對於應用程序我使用這些不同的實現（React，Ember）開發了Ember應用程序，當顯示1000個時，它顯着（很多次）比React應用程序在更改一個列表項時慢。

這是我開發的應用程序的fiddle。推文按照收藏夾進行排序，並且必須在模型中每次更改收藏夾時進行排序。如果你看一下小提琴，你必須按下SHOW LIST列表和按鈕來改變推文才能顯示（需要幾秒鐘顯示）。

App.AppModel = Ember.Object.extend({ 
    topTweets: function() { 
     return this.get('tweets').sort(function(a, b) { 
      return b.favorites - a.favorites; 
     })/*.slice(0,10)*/; 
    }.property('[email protected]') 
}); 
App.appModel = App.AppModel.create({ 
    tweets: renderTweets() 
});

這是偵聽收藏夾變化的模型。

changeOneTweet:function(){ 
         var iPosition = _.random(0, numTweets - 1); 
       var iFavorites = _.random(0, 4000); 
       App.appModel.get('tweets').set(iPosition + '.favorites', iFavorites); 

        },

這是改變一個「tweet」的功能。

我希望Ember的專家能告訴我我做錯了什麼。

來源

2017-05-16 gfels

您使用調試版本的emberjs，其中包含調試代碼。使用prod版進行性能測試。也知道，現在的燼有一個完全不同的渲染模型：新的微光引擎。 – Lux

謝謝你的信息！ – gfels

它有微光引擎的事實意味着Ember不再是KVO例子的選擇嗎？當我讀[這裏]（https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/） - Glimmer的工作類似於虛擬DOM？ – gfels

Ember現在使用 ~~HTMLBars~~（編輯：它被Glimmer -HTMLBars的分支所黯然失色）而不是Handlebars模板語言。我會使用類似ember-twiddle的東西來模擬你的應用，因爲我不知道在jsfiddle中使用ES6語法的方式。

我不知道您是否打算使用Handlebars或HTMLBars，但ember-template-compiler指出它還需要2.0版或更高版本的Handlebars。據說，Handlebars在大型列表中有一些已知的性能問題（參見：https://colintoh.com/blog/htmlbars）。

自2.0以前的Ember以來，很多變化。以下是我發現的一個隨機內容，它可以幫助您沿着正確的方向發展：https://ember-twiddle.com/fc4760a5e5c475bbabc1

來源

2017-05-17 00:12:49 IAMZERG

Ember JS性能問題

回答

相關問題