javascript - Ember JS 性能问题

Question

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

引用 2014 年开发者谈话 here据我了解 - 当显示大量元素时，KVO 应该更快地更改一个列表元素(我认为即使所有元素都更改了)，但对于我使用这些不同实现(React、Ember)开发的应用程序)当显示 1000 个列表项时，Ember 应用程序在更改一个列表项时明显(很多倍)慢于 React 应用程序。

这是一个fiddle我开发的应用程序。推文按收藏夹排序，并且必须根据模型中收藏夹的每次更改进行排序。如果你看一下 fiddle ，你必须按显示列表才能显示列表和更改推文的按钮(需要几秒钟才能显示)。

    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);

                    },

这是更改一条“tweet”的函数。

我希望这里的 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 之前以来，发生了很多变化。这是我发现的一个随机的 Ember 旋转作为示例，可能会帮助您朝着正确的方向前进:https://ember-twiddle.com/fc4760a5e5c475bbabc1