javascript - 哪一种效率更高？ $el.append(newView.render().el);或 $el.append(newView.render().$el);

Question

考虑以下代码片段。

var SomeView = Backbone.View.extend({

    collection: new SomeCollection(),

    render: function() {
        this.$el.empty();
        this.collection.each( function (modelInCollection) {
            var newView = new AnotherView({ model: modelInCollection });
            this.$el.append(newView.render().el);
        }, this);
});

替换是否会更高效(内存、计算)

this.$el.append(newView.render().el);

与

this.$el.append(newView.render().$el);

？哪一种是更优雅的方式，为什么？

Answer 1

第一个 - this.$el.append(newView.render().el); 会更高效，因为append() 的底层代码采用 DOM 节点或 jQuery元素，但最终 jQuery 元素无论如何都需要转换为 DOM 节点，因为append()最终将使用需要 DOM 节点的appendChild()。

性能测试:

所以看起来这充其量只是一个微观优化。运行 jsPerf 测试、附加 DOM 节点或 jQuery 对象本质上是相同的，结果始终在误差范围内。

http://jsperf.com/append-jquery-object-vs-append-dom-node