lundi 22 mai 2017

Ember JS performance problems

I am working on a benchmark research between change detection mechanisms in JavaScript frameworks. I am comparing Virtual DOM and KVO. For KVO example I have chosen Ember and I have developed a little demo app with a tweet list.

Referring to the dev talk 2014 here as I understand - KVO is supposed to be faster at changing one list element when there is a big amount displayed(I think even when all of the elements are changed), but for the application I have developed with these differrent implementations(React, Ember) the Ember app is significantly(alot of times) slower than the React app at changing one list item when there are 1000 displayed.

Here is a fiddle of my developed app. The tweets are sorted by favorites and they have to get sorted on every change of favorites in the model. If you take a look at the fiddle you have to press SHOW LIST for the list and buttons for changing tweets to get displayed(takes a few seconds to show up).

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

This is the model that listens to changes of favorites.

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

                    },

This is the function that changes one "tweet".

I hope that Ember experts here can tell me what I'm doing wrong.




Aucun commentaire:

Enregistrer un commentaire