使用 $.html() 时如何提高渲染性能

我正在研究骨干demo app https://jsfiddle.net/o75r7fu9/8/显示推文列表。当我用不同的数据替换所有“推文”时，我使用以下命令清除列表$.html()

render: function() {
    $("#item-table").html('');
    this.collection.each(this.addItem);
}

我想知道是否有人可以给我一个提示，我可以用什么来代替这个$.html()为了更好的性能，因为通过使用$.html()我导致回流，这导致布局处理时间很差。

代码中还有另外两个地方我使用了$.html()如果有人能给我关于如何改变这些的建议，如果其他地方也可能的话，那就太好了。

Create https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment a new 文档片段 https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment预渲染所有项目，然后更新 DOM 一次。

还有，赞成this.$(...) http://backbonejs.org/#View-dollar全局 jQuery 选择器$(...).

this.$是一个代理this.$el.find(...)这样效率更高，并且不太容易选择视图之外的内容。

使用 jQuery 的核心功能（$()如果视图尚未呈现，则视图内的 ) 可能会失败。所以最好总是通过this.$el因此您甚至可以在视图实际放入 DOM 之前进行更改。

将创建的所有子视图保留在一个数组中，以便稍后干净地删除它们。

initialize: function() {
    this.childViews = [];
},
render: function() {
    // cache the list jQuery object
    this.$list = this.$("#item-table");

    // Make sure to destroy every child view explicitely 
    // to avoid memory leaks
    this.cleanup();

    this.renderCollection();
    return this;
},

真正的优化从这里开始，使用临时容器。

renderCollection: function() {
    var container = document.createDocumentFragment();

    this.collection.each(function(model) {
        // this appends to a in memory document
        container.appendChild(this.renderItem(model, false).el);
    }, this);

    // Update the DOM only once every child view was rendered.
    this.$list.html(container);
    return this;
},

Our renderItem函数仍然可以用于渲染单个项目视图并立即将其放入 DOM 中。但它还提供了推迟 DOM 操作的选项，并且只返回视图。

renderItem: function(model, render) {
    var view = new Item({ model: model });

    this.childViews.push(view);
    view.render();
    if (render !== false) this.$list.append(view.el);
    return view;
},

为了避免悬空侦听器造成内存泄漏，请务必调用remove在忘记每个视图之前。

我通过推迟实际调用来使用额外的优化remove所以我们现在不会在用户等待时浪费时间。

cleanup: function() {
    var _childViewsDump = [].concat(this.childViews);
    this.childViews = [];

    while (_childViewsDump.length > 0) {
        var currentView = _childViewsDump.shift();
        // defer the removal as it's less important for now than rendering.
        _.defer(currentView.remove.bind(currentView), options);
    }
}