Backbone.js性能优化 #

性能问题
├── 频繁DOM操作
├── 过多事件监听
├── 内存泄漏
├── 大数据量渲染
└── 不必要的同步请求

console.time('render');
view.render();
console.timeEnd('render');

var UserListView = Backbone.View.extend({
    render: function() {
        var fragment = document.createDocumentFragment();
        
        this.collection.each(function(user) {
            var view = new UserView({ model: user });
            fragment.appendChild(view.render().el);
        });
        
        this.$el.empty().append(fragment);
        return this;
    }
});

var BadView = Backbone.View.extend({
    render: function() {
        this.$el.empty();
        
        this.collection.each(function(user) {
            this.$el.append('<li>' + user.get('name') + '</li>');
        }, this);
        
        return this;
    }
});

var GoodView = Backbone.View.extend({
    render: function() {
        var html = this.collection.map(function(user) {
            return '<li>' + user.get('name') + '</li>';
        }).join('');
        
        this.$el.html(html);
        return this;
    }
});

var UserView = Backbone.View.extend({
    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        
        this.$name = this.$('.name');
        this.$email = this.$('.email');
        this.$avatar = this.$('.avatar');
        
        return this;
    },
    
    updateName: function(name) {
        this.$name.text(name);
    }
});

var UserView = Backbone.View.extend({
    initialize: function() {
        this.pendingUpdate = false;
        this.listenTo(this.model, 'change', this.scheduleUpdate);
    },
    
    scheduleUpdate: function() {
        if (!this.pendingUpdate) {
            this.pendingUpdate = true;
            requestAnimationFrame(this.render.bind(this));
        }
    },
    
    render: function() {
        this.pendingUpdate = false;
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    }
});

var VirtualListView = Backbone.View.extend({
    initialize: function(options) {
        this.itemHeight = options.itemHeight || 40;
        this.visibleCount = Math.ceil(this.$el.height() / this.itemHeight) + 2;
        this.startIndex = 0;
        
        this.$scrollContainer = options.scrollContainer || $(window);
        this.$scrollContainer.on('scroll', this.onScroll.bind(this));
    },
    
    onScroll: function() {
        var scrollTop = this.$scrollContainer.scrollTop();
        var newStartIndex = Math.floor(scrollTop / this.itemHeight);
        
        if (newStartIndex !== this.startIndex) {
            this.startIndex = newStartIndex;
            this.render();
        }
    },
    
    render: function() {
        var endIndex = Math.min(
            this.startIndex + this.visibleCount,
            this.collection.length
        );
        
        var fragment = document.createDocumentFragment();
        
        for (var i = this.startIndex; i < endIndex; i++) {
            var model = this.collection.at(i);
            var view = new ItemView({ model: model });
            fragment.appendChild(view.render().el);
        }
        
        this.$el.empty().append(fragment);
        this.$el.css('padding-top', this.startIndex * this.itemHeight);
        
        return this;
    }
});

var GoodView = Backbone.View.extend({
    events: {
        'click .item': 'onItemClick',
        'click .delete': 'onDeleteClick'
    },
    
    onItemClick: function(e) {
        var id = $(e.currentTarget).data('id');
    }
});

var BadView = Backbone.View.extend({
    render: function() {
        this.collection.each(function(item) {
            var $item = $('<div class="item">').text(item.get('name'));
            $item.on('click', function() {});
            this.$el.append($item);
        }, this);
    }
});

var SearchView = Backbone.View.extend({
    events: {
        'input #search': 'onSearch'
    },
    
    initialize: function() {
        this.debouncedSearch = _.debounce(this.doSearch, 300);
    },
    
    onSearch: function(e) {
        this.debouncedSearch($(e.target).val());
    },
    
    doSearch: function(query) {
        this.collection.fetch({ data: { q: query } });
    }
});

var UserView = Backbone.View.extend({
    initialize: function() {
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.collection, 'add', this.addOne);
    },
    
    remove: function() {
        this.stopListening();
        Backbone.View.prototype.remove.call(this);
    }
});

var LeakyView = Backbone.View.extend({
    initialize: function() {
        $(window).on('resize', this.onResize);
    },
    
    onResize: function() {
        this.render();
    }
});

var FixedView = Backbone.View.extend({
    initialize: function() {
        this.onResize = this.onResize.bind(this);
        $(window).on('resize', this.onResize);
    },
    
    onResize: function() {
        this.render();
    },
    
    remove: function() {
        $(window).off('resize', this.onResize);
        Backbone.View.prototype.remove.call(this);
    }
});

var PagedCollection = Backbone.Collection.extend({
    initialize: function() {
        this.page = 1;
        this.perPage = 20;
    },
    
    fetchNext: function() {
        return this.fetch({
            data: {
                page: this.page,
                per_page: this.perPage
            },
            remove: false
        });
    },
    
    parse: function(response) {
        this.total = response.total;
        this.hasMore = this.page * this.perPage < this.total;
        return response.data;
    }
});

var LazyView = Backbone.View.extend({
    initialize: function() {
        this.loaded = false;
    },
    
    render: function() {
        if (!this.loaded) {
            this.loadContent();
        }
        return this;
    },
    
    loadContent: function() {
        var self = this;
        
        this.collection.fetch().done(function() {
            self.loaded = true;
            self.renderContent();
        });
    }
});

var CachedModel = Backbone.Model.extend({
    cache: {},
    
    fetch: function(options) {
        options = options || {};
        
        if (options.cache !== false) {
            var cached = this.getCache();
            if (cached) {
                this.set(cached);
                return $.Deferred().resolve().promise();
            }
        }
        
        var self = this;
        return Backbone.Model.prototype.fetch.call(this, options)
            .done(function() {
                self.setCache();
            });
    },
    
    getCache: function() {
        var cached = localStorage.getItem(this.url());
        if (cached) {
            var data = JSON.parse(cached);
            if (Date.now() - data.timestamp < 5 * 60 * 1000) {
                return data.value;
            }
        }
        return null;
    },
    
    setCache: function() {
        localStorage.setItem(this.url(), JSON.stringify({
            value: this.toJSON(),
            timestamp: Date.now()
        }));
    }
});

var BatchCollection = Backbone.Collection.extend({
    batchFetch: function(ids) {
        return $.ajax({
            url: this.url + '/batch',
            method: 'POST',
            data: JSON.stringify({ ids: ids }),
            contentType: 'application/json'
        });
    }
});

var RequestBatcher = {
    pending: [],
    timer: null,
    delay: 50,
    
    add: function(request) {
        this.pending.push(request);
        
        if (!this.timer) {
            this.timer = setTimeout(this.flush.bind(this), this.delay);
        }
    },
    
    flush: function() {
        var batch = this.pending;
        this.pending = [];
        this.timer = null;
        
        $.ajax({
            url: '/api/batch',
            method: 'POST',
            data: JSON.stringify(batch),
            contentType: 'application/json'
        });
    }
};