有关在 Backbone 中呈现列表的更好 logic/performance 的建议

Question

我真的是网络开发新手 Backbone。我想要一些建议，以便在我编写的这个程序中获得更好的性能。我试着写了一个类似于这些的程序：React vs AngularJS vs KnockoutJS: a Performance Comparison

特别是，我想知道 $( "#insideID" ).detach(); 是否是一个好策略。

这是我的部分代码：

<script id="itemTemplate" type="text/template">
<%= name %>
</script>

        $( document ).ready(function() {

            // Model
            var Item = Backbone.Model.extend({
            });

            // Collection
            var ItemsCollection = Backbone.Collection.extend({
                model: Item
            });


            // View for all elements
            var ItemsView = Backbone.View.extend({
                className: 'inside',
                id: 'insideID',

                render: function() {
                    this.collection.each(function(item) {
                        var itemView = new ItemView({ model: item });
                        this.$el.append(itemView.render().el);
                    }, this);

                    return this;
                }
            });

            // View for a single element
            var ItemView = Backbone.View.extend({
                tagName : 'span',

                template: _.template($('#itemTemplate').html() ),

                render: function() {
                    this.$el.html( this.template(this.model.toJSON()) );
                    return this;
                }
            });


            var runBackbone = document.getElementById("run-backbone");
            runBackbone.addEventListener("click", function() {

            var data = _buildData(); //It returns an array of strings

            date = new Date();

            $( "#insideID" ).detach();

            // It creates the collection
            var itemsCollection = new ItemsCollection;

            for (var i = 0; i < data.length; i++)
            {
                newItem = new Item ({name: data[i].label});
                itemsCollection.add(newItem);
            }

            var itemsView = new ItemsView({ collection: itemsCollection });
            $("#col-12").append(itemsView.render().el);

            runBackbone.innerHTML = (new Date() - date) + " ms";


            });

            });

Answer 1

在您的 itemsView 呈现方法中，不是将每个 itemView 附加到您的元素，而是导致许多 DOM 回流，尤其是当您的集合中有许多项目时，您可以使用 documentFragment 作为容器，您只附加一次。

render: function() {
    this.$el.empty();

    var container = document.createDocumentFragment();

    this.collection.each(function(item) {
        var itemView = new ItemView({ model: item });
        container.appendChild(itemView.render().el);
    }, this);

    this.$el.append(container);
    return this;
}

Answer 2

您可能想查看 Marionette 框架。如果您的应用程序开始变得越来越大和复杂（例如网格、布局、复合视图 e.t.c），它将对您有所帮助，Backbone Marionette

有关在 Backbone 中呈现列表的更好 logic/performance 的建议

Advices for better logic/performance on rendering a list in Backbone

javascript

performance

backbone.js

backbone-events