Question

我正在研究JavaScript框架中的变更检测机制之间的基准研究。我正在比较Virtual DOM和KVO。对于KVO示例，我选择了Ember，我开发了一个带有推文列表的小型演示应用程序。

根据我的理解，参考开发者谈话2014 here - 当显示大量时，KVO应该更快地更改一个列表元素（我想即使所有元素都被更改），但是对于我用这些不同的实现（React，Ember）开发的应用程序，当显示1000个时，Ember应用程序在更改一个列表项时比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('tweets.@each.favorites')
});
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);

                    },

这是改变一条“推文”的功能。

我希望这里的Ember专家可以告诉我我做错了什么。

Answer 1

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

Ember JS的性能问题

1 个答案: